"Otto Wyss" <ot****@bluewin.chwrote in message
news:46**********@news.bluewin.ch...
I've now been looking for a week for a simple but useful sample on how to
get a list of entries (persons) via an XMLHttpRequest using Json/PHP on
the server. So far I've found about a thousend different tutorials and
code samples but not a single one, where the server returns an array of
entries. Very few samples use Json at all and almost none show the server
code. So does anybody know a sample which
- uses just a small javascript library (preferable jQuery)
- uses Json/PHP and returns a list (array) of entries
- contains the full code, server and client side
- hopefully has a working demo on the web
Or does somebody have such a sample to share or put up on the web?
O. Wyss
I have the following sample running only on my development computer... it's
a very basic sample, no error handling or other gadgets...
Get "AjaxRequest.js" from:
http://www.ajaxtoolbox.com/request/source.php
(okay, this is the only gadget but a very basic and small(!!) library,
also.. read what Matt Kruse is writing!)
put the following 3 files in the same directory and run index.php
json.txt
{"employees":[
{"name": "John", "id": 10},
{"name": "Jane", "id": 12},
{"name": "Tom", "id": 13},
{"name": "Jones", "id": 15}
]
}
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sample 1</title>
<script type="text/javascript" src="AjaxRequest.js"></script>
<script type="text/javascript">
//<![CDATA[
var jsonobject;
window.onload = function(){
AjaxRequest.post(
{'url':'get.php', 'parameters':{'list':'employees'}
,'onSuccess':function(req){
jsonobject = eval('('+req.responseText+')');
/* get the select element and fill the list from the json string */
var sel = document.getElementById("list1");
for (var i=0; i < jsonobject.employees.length;i++){
addOptions(sel, jsonobject.employees[i].id,
jsonobject.employees[i].name);
}
}, 'onError':function(req){ alert("Error!\nStatusText="+req.statusText);}
});
}
function addOptions(object, oValue, oText) {
/* very simple (old skool) method of adding list options */
var defaultSelected = true; var selected = true;
var optionName = new Option(oText, oValue, defaultSelected, selected)
var length = object.length;
object.options[length] = optionName;
}
//]]>
</script>
</head>
<body>
<select name="list1" id="list1" size="4">
</select>
</body>
</html>
get.php
<?php
$what = $_GET["list"];
if ($what = "employees"){
$file = "json.txt";
header("Content-type: application/json; charset=utf-8");
header("Content-Transfer-Encoding: 8bit");
header("Content-Length: " . filesize($file));
print(file_get_contents($file));
}else{
// another list?
}
?>
