jquery ajax返回json数据进行前后台交互实例

aure 2021-08-26 原文

jquery ajax返回json数据进行前后台交互实例

利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据，下面我来演示一个实例。

先我们看演示代码

代码如下复制代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

</head>

<body
style=”font-family:Arial;line-height:150%”>

<a
href=”javascript:getAllUsers();”>获取所有用户信息</a>
  

<!– 用于显示返回结果 –>
<div
id=”users”></div>

</body>
</html>

当我们点击获取所有用户信息在div的id=users中显示

Ajax返回的JSON字符串：
[{“userId”:1,”userName”:”Raysmond”},{“userId”:2,”userName”:”u96f7u5efau5764″},{“userId”:3,”userName”:”Rita”}]

解析出来的结果为：
userId = 1
userName = Raysmond
userId = 2
userName = 雷建坤
userId = 3
userName = Rita

上面代码大家可能看不懂，我们现在来详细介绍

代码部分

代码如下复制代码
index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

</head>

<body
style=”font-family:Arial;line-height:150%”>
<h1>Ajax利用JSON进行前后台交互</h1>

<a
href=”javascript:getAllUsers();”>获取所有用户信息</a>
<br/>

<!– 用于显示返回结果
–>
<div
id=”users”></div>

</body>
</html>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 =
\'<br/><span
style=”color:red;”>Ajax返回的JSON字符串：</span><br/>\’

+ json +
\'<br/><br/><span
style=”color:red;”>解析出来的结果为：</span><br/>\’;

for(var
i=0;i<users.length;++i){
usersHtml += \’userId = \’ + users[i].userId +
\'<br/>\’

+ \’userName = \’ + users[i].userName +
\'<br/>\’;
}
//把构造的HTML利用jQuery动态显示到页面
$(\’#users\’).empty().html(usersHtml);
}
service.php

<?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);
}
?>