PHP 与 js的通信(via ajax,json)


Posted in Javascript onNovember 16, 2010

JavaScript端:
注意:一定要设置xmlHttp.setRequestHeader,否则传往PHP的参数会变成null(line 38)
亮点在line 31!

<script type="text/javascript"> 
function GetJson() { 
var xmlHttp; 
try { 
// Firefox, Opera 8.0+, Safari 
xmlHttp = new XMLHttpRequest(); 
} 
catch (e) { 
// Internet Explorer 
try { 
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch (e) { try { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch (e) { 
alert("您的浏览器不支持AJAX!"); 
return false; 
} 
} 
} 
xmlHttp.onreadystatechange = function() { 
if (xmlHttp.readyState == 4) { 
//alert(xmlHttp.responseText); 
var str = xmlHttp.responseText; 
document.getElementById('show').innerHTML +=str; 
//alert(str); 
var obj = eval('('+ xmlHttp.responseText +')'); 
//var obj = eval(({"id":"123","name":"elar","age":"21"})); 
alert(obj.name); 
} 
} 
var data = "id=123"; 
xmlHttp.open("POST", "testJson.php", true); 
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.send("id=123"); 
} 
</script> 
<input type="button" onclick="GetJson()" value="按我!"/> 
<hr /> 
<div id="show"></div>

PHP端【testJson.php】:
(注意,php文件要干净,<?php ?>标签的外部不能有其他标签,否则eval函数无法解析)
亮点在line 6
<?php 
$res['id'] = $_POST['id']; 
$res['name'] = "elar"; 
$res['age'] = "21"; 
$response = "hello this is response".$_POST['id']; 
echo json_encode($res); 
?>

总结:
js要往PHP端送数据,用的是xmlHttp.send("id=123");
PHP给js送数据,用的是echo json_encode($res);(要注意变量$res的构造应符合JSON的规范)
js要解析PHP送来的JSON格式的数据,用var obj = eval('('+ xmlHttp.responseText +')');
Javascript 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
div层的移动及性能优化
Nov 16 #Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 #Javascript
javascript Array对象基础知识小结
Nov 16 #Javascript
纯js实现背景图片切换效果代码
Nov 14 #Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 #Javascript
You might like
常见的PHP五种设计模式小结
2011/03/23 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
详解JS模块导入导出
2017/12/20 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
pandas apply多线程实现代码
2020/08/17 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
电子信息专业学生自荐信
2013/11/09 职场文书
交通违章检讨书
2014/09/21 职场文书
毕业横幅标语
2014/10/08 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
导游带团欢迎词
2015/09/30 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
2016年十一促销广告语
2016/01/28 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL