用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 set_time_limit(0)长连接的实现分析
Mar 02 PHP
PHP中“简单工厂模式”实例代码讲解
Sep 04 PHP
利用PHP扩展vld查看PHP opcode操作步骤
Mar 04 PHP
php查找任何页面上的所有链接的方法
Dec 03 PHP
php格式输出文件var_export函数实例
Nov 15 PHP
php定义一个参数带有默认值的函数实例分析
Mar 16 PHP
php实现SAE上使用storage上传与下载文件的方法
Jun 29 PHP
详解PHP用substr函数截取字符串中的某部分
Dec 03 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
May 23 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
May 08 PHP
Laravel数据库读写分离配置的方法
Oct 13 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
Dec 13 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 方便水印和缩略图的图形类
2009/05/21 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
ini_set的用法介绍
2014/01/07 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
javascript回到顶部特效
2016/07/30 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python随机读取文件实现实例
2017/05/25 Python
Python中enumerate函数代码解析
2017/10/31 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python中for in的用法详解
2020/04/17 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
请用用Java代码写一个堆栈
2012/01/26 面试题
房产代理公证处委托书
2014/04/04 职场文书
家长通知书教师评语
2014/04/17 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
运动会开幕式致辞
2015/07/29 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
canvas实现贪食蛇的实践
2022/02/15 Javascript