快捷導航

用Json實現(xiàn)PHP與JavaScript間數(shù)據(jù)交換的方法詳解

更新時間：2013年06月20日 11:22:46 作者：

本篇文章是對用Json實現(xiàn)PHP與JavaScript間數(shù)據(jù)交換的方法進行了詳細的分析介紹，需要的朋友參考下

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。
簡而論之，不管是xml還是json都是為了方便在客戶端與服務(wù)器端交互數(shù)據(jù)的中轉(zhuǎn)站，特別是用于對象型數(shù)據(jù)，比如最常見的數(shù)組。

下面將分別將數(shù)組從php傳送給javascript，以及將數(shù)組從javascript傳送給php示例說明，例子比較簡單，明白概念即可。不管從php傳送給javascript，還是javascript傳送給php，json在傳送之前都會將對象扁平化即一維化為字符串。
PHP 向 JavaScript 傳值
PHP 文件 json.php

復(fù)制代碼代碼如下:

<?php 
     $arr = array( 
         'name' => '腳本之家', 
         'nick' => 'Gonn', 
         'contact' => array( 
             'email' => 'xxxxxxx@163.com', 
             'website' => 'http://m.fzitv.net', 
         ) 
     ); 
     $json_string = json_encode($arr); 
     echo "getProfile($json_string)"; 
 ?> 

光執(zhí)行這個文件，其結(jié)果如下：

復(fù)制代碼代碼如下:

getProfile({"name":"u5e0cu4e9a","nick":"Gonn", 
"contact":{"email":"xxxxxxx@163.com","website":"http://m.fzitv.net"}}) 

json.php 是通過 json_encode 函數(shù)將數(shù)組扁平化，然后發(fā)送，相反有個 json_decode 函數(shù)。
那么在 JavaScript 如何調(diào)用呢？很簡單，定義一個變量獲取 PHP 傳來的 Json，該 Json 具備對象的特性，我們可以用 array.name 這種方式來獲取該 Json 的屬性。

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
 function getProfile(str) {  
     var arr = str;  
     document.getElementById('name').innerHTML = arr.name;  
     document.getElementById('nick').innerHTML = arr.nick;  
     document.getElementById('email').innerHTML = arr.contact.email; 
     document.getElementById('website').innerHTML = arr.contact.website; 
 }  
 </script> 
 <body> 
 <div id="name"></div> 
 <div id="nick"></div> 
 <div id="email"></div> 
 <div id="website"></div> 
 </body> 
 <script type="text/javascript" src="json.php"></script> 

運行結(jié)果如下：

復(fù)制代碼代碼如下:

腳本之家 
 Gonn 
 xxxxxxx@163.com 
 http://m.fzitv.net 

JavaScript 向 PHP 傳值
json_encode.html

復(fù)制代碼代碼如下:

<!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>json:From javascript To php</title> 
 <script src="json2.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
 function JSON_test(o) 
 { 
     var user = { 
         name:document.getElementById('txt_name').value, 
         email:document.getElementById('txt_email').value, 
         password:document.getElementById('txt_password').value 
     } 
     var json_string = JSON.stringify(user); 
     document.getElementById('txt_json').value=json_string; 
     alert("點擊確定后將提交表單"); 
     o.submit(); 
 } 
 </script> 
 </head> 

 <body> 

     <form id="form1" name="form1" method="post" action="json_encode.php"onsubmit="JSON_test(this);return flase;"> 
         <label for="txt_name">姓名</label> 
         <p><input type="text" name="txt_name" id="txt_name" /></p> 
         <label for="txt_email">郵箱</label> 
         <p><input type="text" name="txt_email" id="txt_email" /></p> 
         <p><label for="txt_password">密碼</label></p> 
         <p><input type="text" name="txt_password" id="txt_password" /></p> 
         <p><input type="text" name="txt_json" id="txt_json" /> 
             <label for="button"></label> 
             <input type="submit" name="button" id="button" value="JSON" /> 
         </p> 
     </form> 

 </body> 
 </html> 

這里javascript扁平化需要一個插件：http://www.json.org/json2.js，通過JSON.stringify(str)將對象扁平化然后傳送給php。
注：另有一個http://www.json.org/json.js，對應(yīng)的是toJSONString方法。

復(fù)制代碼代碼如下:

var last=obj.toJSONString(); //針對json.js 
 var last=JSON.stringify(obj); //針對json2.js 

json_encode.php

復(fù)制代碼代碼如下:

<?php 
     header('Content-Type: text/html; charset=utf-8'); 
     $json_string = $_POST["txt_json"]; 
     //echo $json_string; 
     if(ini_get("magic_quotes_gpc")=="1") 
     { 
         $json_string=stripslashes($json_string); 
     } 
     $user = json_decode($json_string); 

     echo var_dump($user); 

     echo '<br /><br /><br /><br />'; 
     echo $user->name.'<br />'; 
     echo $user->email.'<br />'; 
     echo $user->password.'<br />'; 
 ?> 