用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实现无限级分类实现代码(递归方法)
Jan 01 PHP
php中全局变量global的使用演示代码
May 18 PHP
php中邮箱地址正则表达式实现与详解
Apr 24 PHP
PHP ignore_user_abort函数详细介绍和使用实例
Jul 15 PHP
php实现斐波那契数列的简单写法
Jul 19 PHP
thinkphp3.x中变量的获取和过滤方法详解
May 20 PHP
php微信公众账号开发之前五个坑(一)
Sep 18 PHP
Yii CFileCache 获取不到值的原因分析
Feb 08 PHP
2017年最新PHP经典面试题目汇总(上篇)
Mar 17 PHP
自制PHP框架之设计模式
May 07 PHP
php实现的双色球算法示例
Jun 20 PHP
Laravel中服务提供者和门面模式的入门介绍
Nov 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面试题集锦
2012/03/08 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python生成随机数的方法
2014/01/14 Python
python threading模块操作多线程介绍
2015/04/08 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python动态视频下载器的实现方法
2019/09/16 Python
Python解析json代码实例解析
2019/11/25 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
表彰会主持词
2014/03/26 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书