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