用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 常用类汇总 推荐收藏
May 13 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
Oct 13 PHP
关于PHP递归算法和应用方法介绍
Apr 15 PHP
php获得用户ip地址的比较不错的方法
Feb 08 PHP
Parse正式发布开源PHP SDK
Aug 11 PHP
PHP return语句另类用法不止是在函数中
Sep 17 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
Oct 21 PHP
php中return的用法实例分析
Feb 28 PHP
php实现通用的从数据库表读取数据到数组的函数实例
Mar 21 PHP
java微信开发之上传下载多媒体文件
Jun 24 PHP
yii2使用gridView实现下拉列表筛选数据
Apr 10 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
Apr 27 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获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
枚举JavaScript对象的函数
2006/12/22 Javascript
Javascript中的数学函数
2007/04/04 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
基于jquery的表格排序
2010/09/11 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
js对象的复制继承实例
2015/01/10 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
python修改操作系统时间的方法
2015/05/18 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
个人自我鉴定写法
2013/11/30 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
SpringBoot整合Minio文件存储
2022/04/03 Java/Android