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 处理表单元素的代码
Feb 15 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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 获取ip地址代码汇总
2015/07/05 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
讲解Python中的标识运算符
2015/05/14 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
查看Django和flask版本的方法
2018/05/14 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python实现简单成绩录入系统
2019/09/19 Python
pygame实现弹球游戏
2020/04/14 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
继电保护工岗位职责
2014/01/05 职场文书
迟到早退检讨书
2014/02/10 职场文书
测控技术自荐信
2014/06/05 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android