用Json实现PHP与JavaScript间数据交换的方法详解


Posted in PHP onJune 20, 2013

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' => 'xxxxxxx@163.com', 
             'website' => 'https://3water.com', 
         ) 
     ); 
     $json_string = json_encode($arr); 
     echo "getProfile($json_string)"; 
 ?>

光执行这个文件,其结果如下:
getProfile({"name":"u5e0cu4e9a","nick":"Gonn", 
"contact":{"email":"xxxxxxx@163.com","website":"https://3water.com"}})

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 
 xxxxxxx@163.com 
 https://3water.com

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->属性即可。
PHP 相关文章推荐
php完全过滤HTML,JS,CSS等标签
Jan 16 PHP
关于Appserv无法打开localhost问题的解决方法
Oct 16 PHP
PHP XML数据解析代码
May 26 PHP
PHP 设置MySQL连接字符集的方法
Jan 02 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
Jun 28 PHP
php模拟服务器实现autoindex效果的方法
Mar 10 PHP
php 问卷调查结果统计
Oct 08 PHP
php简单备份与还原MySql的方法
May 09 PHP
PHP编写登录验证码功能 附调用方法
May 19 PHP
PHP中使用foreach()遍历二维数组的简单实例
Jun 13 PHP
PHP html_entity_decode()函数讲解
Feb 25 PHP
php+mysql开发中的经验与常识小结
Mar 25 PHP
使用php 获取时间今天明天昨天时间戳的详解
Jun 20 #PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
Jun 20 #PHP
解析yii数据库的增删查改
Jun 20 #PHP
在yii中新增一个用户验证的方法详解
Jun 20 #PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
Jun 20 #PHP
php中0,null,empty,空,false,字符串关系的详细介绍
Jun 20 #PHP
解析PHP中数组元素升序、降序以及重新排序的函数
Jun 20 #PHP
You might like
终于听上了直流胆调频
2021/03/02 无线电
深入array multisort排序原理的详解
2013/06/18 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
原生js实现日历效果
2020/03/02 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python实现二叉树的遍历
2017/12/11 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Django中Middleware中的函数详解
2019/07/18 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python通过http下载文件的方法详解
2019/07/26 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
银行演讲稿范文
2014/01/03 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript