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实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
php实现微信模板消息推送
2018/03/30 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python中return语句用法实例分析
2015/08/04 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
建筑工程质量通病防治方案
2014/06/08 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
党支部考察意见范文
2015/06/02 职场文书
教师节领导致辞
2015/07/29 职场文书