用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 相关文章推荐
怎样在UNIX系统下安装php3
Oct 09 PHP
PHP程序员必须清楚的问题汇总
Dec 18 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
Feb 03 PHP
php+MySQL实现登录时验证登录名和密码是否正确
May 10 PHP
PHP实现冒泡排序的简单实例
May 26 PHP
10个值得深思的PHP面试题
Nov 14 PHP
PHP使用curl函数发送Post请求的注意事项
Nov 26 PHP
php使用curl代理实现抓取数据的方法
Feb 03 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
Aug 02 PHP
laravel 实现根据字段不同值做不同查询
Oct 23 PHP
php传值和传引用的区别点总结
Nov 19 PHP
Laravel Eloquent分表方法并使用模型关联的实现
Nov 25 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
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
python进程与线程小结实例分析
2018/11/11 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
javascript 写类方式之五
2009/07/05 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
express.js中间件说明详解
2019/03/19 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python3 合并二叉树的实现
2019/09/30 Python
python opencv如何实现图片绘制
2020/01/19 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
详解Python中的Lock和Rlock
2021/01/26 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
如何删除一个表里面的重复行
2013/07/13 面试题
财务分析个人的自荐书范文
2013/11/24 职场文书
物业消防安全责任书
2014/07/23 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python