jquery ajax返回json資料進行前後台互動執行個體

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

先我們看示範代碼

代碼如下

複製代碼

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

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

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

/**
* 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 = '<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);
}
?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More