您的位置:首页 > Web前端 > JQuery

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

aure 2015-07-09 12:54 48 查看

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

<title>Ajax json
test</title>

<script language="javascript"
src="./jquery-1.7.1.min.js"
/></script>

<script language="javascript" src="./ajax_json.js"
/></script>

</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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

<title>Ajax json
test</title>

<script language="javascript"
src="./jquery-1.7.1.min.js"
/></script>

<script language="javascript" src="./ajax_json.js"
/></script>

</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);

}

?>
标签: