程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 用Json實現PHP與JavaScript間數據交換的方法詳解

用Json實現PHP與JavaScript間數據交換的方法詳解

編輯:關於PHP編程

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

下面將分別將數組從php傳送給javascript,以及將數組從javascript傳送給php示例說明,例子比較簡單,明白概念即可。不管從php傳送給javascript,還是javascript傳送給php,json在傳送之前都會將對象扁平化即一維化為字符串。
PHP 向 JavaScript 傳值
PHP 文件 json.php
復制代碼 代碼如下:
<?php
     $arr = array(
         'name' => '',
         'nick' => 'Gonn',
         'contact' => array(
             'email' => '[email protected]',
             'website' => 'http://www.jb51.net',
         )
     );
     $json_string = json_encode($arr);
     echo "getProfile($json_string)";
 ?>

光執行這個文件,其結果如下:
復制代碼 代碼如下:
getProfile({"name":"u5e0cu4e9a","nick":"Gonn",
"contact":{"email":"[email protected]","website":"http://www.jb51.net"}})

json.php 是通過 json_encode 函數將數組扁平化,然後發送,相反有個 json_decode 函數。
那麼在 JavaScript 如何調用呢?很簡單,定義一個變量獲取 PHP 傳來的 Json,該 Json 具備對象的特性,我們可以用 array.name 這種方式來獲取該 Json 的屬性。
復制代碼 代碼如下:
<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>

運行結果如下:
復制代碼 代碼如下:

 Gonn
 [email protected]
 http://www.jb51.net

JavaScript 向 PHP 傳值
json_encode.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>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,對應的是toJSONString方法。
復制代碼 代碼如下:
var last=obj.toJSONString(); //針對json.js
 var last=JSON.stringify(obj); //針對json2.js

json_encode.php
復制代碼 代碼如下:
<?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 />';
 ?>

這裡就需要用到json_decode()這個函數,然後調用其中數據用 $obj->屬性即可。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved