使用Javascript Ajax 通信操作JSON數據 [下] - jacson－IT工程師數位筆記本

文章出處

上一篇文章我們獲得后臺數據庫的數據后轉換成json格式然后返回到前臺，但只是返回的一位數組，這次我們返回二維和三維數組和對象。

前臺代碼shizhan.html:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>json數據獲取</title>
 5     <meta charset="utf-8">
 6     <script src='jquery.js'></script>
 7     <script type="text/javascript">
 8     $("document").ready(function() {
 9         var url="shizhan.php";
10         var data={"do":"first"};
11         
12         $.getJSON(url,data,function(res){
13             $("#username").val(res.username);
14             $("#password").val(res.password);
15         });
16 
17         var data={"do":"second"};
18         $.getJSON(url,data,function(res) {
19             $("#members").val(res.third.members.username);
20         });
21 
22         var data={"do":"third"};
23         $.getJSON(url,data,function(res){
24             $("#address").val(res.address[1].username);
25         });
26         
27     });
28     </script>
29 </head>
30 <body>
31     <h2>一位數組json數據顯示</h2>
32     <input type="text" name="username" id="username" /><br/>
33     <input type="password" name="password" id="password">
34 
35     <h2>二位數組json數據顯示</h2>
36     <textarea id="members"></textarea>
37 
38     <h2>三位數組json數據顯示</h2>
39     <textarea id="address"></textarea>
40 </body>
41 </html>

這里我們用$.getJSON(url,data,callback)來獲得我們從url處返回的json格式的數據，注意，$.getJSON()中的JSON必須大寫。

并且這時我們傳遞給后臺的參數不把它放在url的末尾，而是直接放在新定義的data變量中。所以后臺程序獲取參數時不再使用$_GET[]了，而是使用$_REQUEST[].

還有一點值得提醒的是，在將返回得到的json格式的數據時，如果后臺的二位數組中的第一位是['1']，則我們在前臺賦給變量中的數據的格式應為上述代碼中的

$("#address").val(res.address[1].username); ，而不是 $("#address").val(res.address.1.username); ,而如果后臺的二維或者是三維數組的第一位是['third']等英文時，則可用上述代碼中的 $("#members").val(res.third.members.username); .

　　后臺代碼：

 1 <?php
 2 
 3 $do=$_REQUEST['do'];
 4 
 5 $member['username']='慕課網';
 6 $member['password']='mukewang';
 7 
 8 $members['1']['username']='張三';
 9 $members['1']['password']='zhangsan';
10 $members['2']['username']='李四';
11 $members['2']['password']='lisi';
12 $members['2']['address']='朝陽區';
13 
14 $members['third']['members']['username']='我是第三個用戶名';
15 
16 class addressClass{
17     public $address = array();
18 
19     public function setAddress($array) {
20         $this->address=$array;
21     } 
22 
23     public function getAddrss() {
24         return $this->address;
25     }
26 }
27 
28 $addressObj = new addressClass();
29 
30 $addressObj->setAddress($members);
31 
32 switch($do) {
33     case 'first' : echo json_encode($member);break;
34 
35     case 'second': echo json_encode($members);break;
36 
37     case 'third' : echo json_encode($addressObj);break;
38 }