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

 
获取所有用户信息   
 

 

index.html

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

Ajax利用JSON进行前后台交互

/**
 * jQuery 同步Ajax封装
 */
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('('+ 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);
 }
?>