用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之PHP语法学习笔记1
Dec 17 PHP
PHP清除数组中所有字符串两端空格的方法
Oct 20 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
Nov 25 PHP
PHP SOCKET编程详解
May 22 PHP
php代码架构的八点注意事项
Jan 25 PHP
php打包网站并在线压缩为zip
Feb 13 PHP
PHP实现页面静态化的超简单方法
Sep 06 PHP
CodeIgniter框架基本增删改查操作示例
Mar 23 PHP
php简单生成一组与多组随机字符串的方法
May 09 PHP
Laravel框架路由和控制器的绑定操作方法
Jun 12 PHP
YII分模块加载路由的实现方法
Oct 01 PHP
PHP获取学生成绩的方法
Nov 17 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
7个超级实用的PHP代码片段
2011/07/11 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
全面解读Python Web开发框架Django
2014/06/30 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python迭代和迭代器详解
2016/11/10 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
python实现IOU计算案例
2020/04/12 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
长青弘远的面试题
2012/06/09 面试题
西安交大自主招生自荐信
2014/01/27 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
护士长竞聘书
2014/03/31 职场文书
世界读书日的活动方案
2014/08/20 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
销售2014年度工作总结
2014/12/08 职场文书
化验员岗位职责
2015/02/14 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript