用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 正则学习实例
Jul 30 PHP
php 图像函数大举例(非原创)
Jun 20 PHP
array_multisort实现PHP多维数组排序示例讲解
Jan 04 PHP
通过JavaScript或PHP检测Android设备的代码
Mar 09 PHP
解析PHP多种序列化与反序列化的方法
Jun 06 PHP
php Calender(日历)代码分享
Jan 03 PHP
Laravel 4.2 中队列服务(queue)使用感受
Oct 30 PHP
Linux系统递归生成目录中文件的md5的方法
Jun 29 PHP
php处理json格式数据经典案例总结
May 19 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
Aug 17 PHP
thinkPHP5.0框架简单配置作用域的方法
Mar 17 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
Apr 08 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
PHP 实例化类的一点摘记
2008/03/23 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php向js函数传参的几种方法
2014/08/10 PHP
PHP实现的简单缓存类
2015/07/29 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Python ldap实现登录实例代码
2016/09/30 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
厉行勤俭节约倡议书
2014/05/16 职场文书
圣诞晚会主持词
2015/07/01 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL