用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扩展ZF――Validate扩展
Jan 10 PHP
PHP 工厂模式使用方法
May 18 PHP
一个PHP缓存类代码(附详细说明)
Jun 09 PHP
如何突破PHP程序员的技术瓶颈分析
Jul 17 PHP
解析posix与perl标准的正则表达式区别
Jun 17 PHP
Yii结合CKEditor实现图片上传功能
Jun 13 PHP
Linux环境下php实现给网站截图的方法
May 03 PHP
php实现数据库的增删改查
Feb 26 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
Mar 31 PHP
thinkphp5.1 文件引入路径问题及注意事项
Jun 13 PHP
PHP调用微博接口实现微博登录的方法示例
Sep 22 PHP
PHP中isset、empty的用法与区别示例详解
Nov 05 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
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
php取出数组单个值的方法
2018/03/12 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
vue中 this.$set的用法详解
2019/09/06 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
介绍Python中的__future__模块
2015/04/27 Python
python和shell获取文本内容的方法
2018/06/05 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
介绍一下Java中的static关键字
2012/05/12 面试题
个人自我鉴定
2013/11/07 职场文书
打架检讨书50字
2014/01/11 职场文书
简历自我评价模版
2014/01/31 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
党章培训心得体会
2014/09/04 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
检举信的写法
2019/04/10 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Python数据结构之队列详解
2022/03/21 Python