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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php操作access数据库的方法详解
2017/02/22 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
遥感技术与仪器求职信
2014/02/22 职场文书
中学生自我评价2015
2015/03/03 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers