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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
javascript如何实现create方法
Nov 04 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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之字符串变相相减的代码
2007/03/19 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
asp 取文本框名称代码
2008/12/02 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
图解js图片轮播效果
2015/12/20 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python中map()与zip()操作方法
2016/02/27 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
django修改models重建数据库的操作
2020/03/31 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
Exception类的常用方法
2012/06/16 面试题
初级Java程序员面试题
2016/03/03 面试题
laravel使用redis队列实例讲解
2021/03/23 PHP
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
初中生三年学习生活的自我评价
2013/11/03 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书