客户端代码ajax_client.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php+jquery+ajax+json示例</title>
<script src="jquery-1.5.1.min.js"></script>
</head>
<body>
php+jquery+ajax+json示例<br/>
</body>
<script type="text/javascript">
//添加文档
$(document).ready(
function(){
$("body").append('<input type="button" value="请求服务器" id="btn" />');
$('#btn').click(function (){ getServerData(); });
$("body").append('<div id="result"></div>');
}
);
//设置ajax的参数
function getServerData(){
$.ajax({
url:"ajax_server.php",
data:"name=周&sex=男&age=11",
timeout:3000,
type:"POST",
error:function (XMLHttpRequest, textStatus, errorThrown) {alert('请求错误...'+errorThrown);},
beforeSend:function (XMLHttpRequest) {alert('发送请求之前...');},
success: function (data, textStatus) {alert('请求成功...');},
complete:handleResponse
});
}
//成功返回的绑定函数
function handleResponse(XMLHttpRequest, textStatus) {
alert('完成啦...'+XMLHttpRequest);
var myjson = eval(XMLHttpRequest.responseText);
var str="";
for(var i=0;i<myjson.length;i++){
str+="姓名:"+myjson[i].name+"<br />";
str+="年龄:"+myjson[i].age+"<br />";
str+="性别:"+myjson[i].sex+"<br />";
}
$("#result").html(str);
$("#result").append('<input type="button" value="清除数据" id="btn2" />');
$('#btn2').click(function (){ $("#result").html(''); });
}
</script>
</html>
服务器端代码ajax_server.php
<?php
$data[]=array('name'=>'万','sex'=>'男','age'=>12);
$data[]=array('name'=>'陈','sex'=>'女','age'=>10);
$data[]=array('name'=>$_REQUEST['name'],'sex'=>$_REQUEST['sex'],'age'=>$_REQUEST['age']);
echo json_encode($data);
?>
还需要的是一个类库jquery-1.5.1.min.js,把这三个文件放到同一个文件夹即可。。
示例的图片：
7157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
