用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 相关文章推荐
Windows下PHP的任意文件执行漏洞
Oct 09 PHP
几种有用的变型 PHP中循环语句的用法介绍
Jan 30 PHP
PHP数组传递是值传递而非引用传递概念纠正
Jan 31 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
Jun 21 PHP
PHP中判断变量为空的几种方法分享
Aug 26 PHP
一漂亮的PHP图片验证码实例
Mar 21 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
Jun 26 PHP
ecshop后台编辑器替换成ueditor编辑器
Mar 03 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
Mar 13 PHP
PHP抽象类和接口用法实例详解
Jul 20 PHP
PHP实现文件上传与下载
Aug 28 PHP
thinkphp5 redis缓存新增方法实例讲解
Mar 24 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时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
javascript 闭包详解
2015/07/02 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
深入理解vue Render函数
2017/07/19 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python查询mysql,返回json的实例
2018/03/26 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
专科文秘应届生求职信
2013/11/18 职场文书
高中军训感言1000字
2014/03/01 职场文书
党务公开方案
2014/05/06 职场文书
安全环保演讲稿
2014/08/28 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
初中运动会前导词
2015/07/20 职场文书