用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边学边教》(02.Apache+PHP环境配置――下篇)
Dec 13 PHP
PHP读取目录下所有文件的代码
Jan 07 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
Apr 24 PHP
PHP HTML代码串 截取实现代码
Jun 29 PHP
php 冒泡排序 交换排序法
May 10 PHP
php学习笔记之 函数声明(二)
Jun 09 PHP
关于PHP递归算法和应用方法介绍
Apr 15 PHP
解析如何在PHP下载文件名中解决乱码的问题
Jun 20 PHP
php遍历目录与文件夹的多种方法详解
Nov 14 PHP
PHP批量生成静态HTML的简单原理和方法
Apr 20 PHP
PHP中is_file()函数使用指南
May 08 PHP
详解PHP 二维数组排序保持键名不变
Mar 06 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防注
2007/01/15 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
javascript import css实例代码
2008/07/18 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
js密码强度检测
2016/01/07 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
顶岗实习接收函
2014/01/09 职场文书
工作时间上网检讨书
2014/02/03 职场文书
创业大赛策划书
2014/03/01 职场文书
大学生简短的自我评价
2014/09/12 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
心灵点滴观后感
2015/06/02 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server