用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 相关文章推荐
在数据量大(超过10万)的情况下
Jan 15 PHP
php中获得视频时间总长度的另一种方法
Sep 15 PHP
PHP使用CURL获取302跳转后的地址实例
May 04 PHP
php实现httpRequest的方法
Mar 13 PHP
Smarty最简单实现列表奇偶变色的方法
Jul 01 PHP
帝国cms目录结构分享
Jul 06 PHP
PHP实现批量上传单个文件
Dec 29 PHP
php bootstrap实现简单登录
Mar 08 PHP
php blowfish加密解密算法
Jul 02 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
Jun 13 PHP
php微信公众号开发之校园图书馆
Oct 20 PHP
laravel 实现根据字段不同值做不同查询
Oct 23 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
通过html表格发电子邮件
2006/10/09 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
python简单实现旋转图片的方法
2015/05/30 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
如何利用Python识别图片中的文字
2020/05/31 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
外贸实习生自荐信范文
2013/11/24 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Python WSGI 规范简介
2021/04/11 Python
Node.js实现断点续传
2021/06/23 Javascript