index.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ajax利用JSON进行前后台交互

获取所有用户信息





ajax_json.js

function getJson(RequestData,URL){
var reJson;
$.ajax({
type:'POST',
url:URL,
data:RequestData,
async:false, //为了简便，设置为同步操作
cache: false,
success:function(responseData){
reJson=responseData;
}
});
return reJson;
}

function getAllUsers(){
var url = "./service.php";
var request = 'action=get_all_users';
//从后台获取并解析，由于上面封装ajax采用的是同步返回，
//所以这样操作能成功获取返回数据
var json = getJson(request,url);
var users = eval_r('('+ json +')');

var usersHtml = '
Ajax返回的JSON字符串：
'
+ json + '

解析出来的结果为：
';
for(var i=0;i usersHtml += 'userId = ' + users[i].userId + '
'
+ 'userName = ' + users[i].userName + '
';
}
//把构造的HTML利用jQuery动态显示到页面
$('#users').empty().html(usersHtml);
}
service.php
//接受请求参数并根据参数选择操作
if(isset($_POST['action'])&&$_POST['action']!=""){
switch($_POST['action']){
case 'get_all_users': getAllUsers(); break;
default:
}
}
//处理请求：以JSON格式返回所有用户信息
function getAllUsers(){
$users = array(
array("userId"=>1,"userName"=>"Raysmond"),
array("userId"=>2,"userName"=>"雷建坤"),
array("userId"=>3,"userName"=>"Rita")
);
echo json_encode($users);
}
?>