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 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 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
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
大白话讲解JavaScript的Promise
2017/04/06 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
基于PyTorch中view的用法说明
2021/03/03 Python
武汉某公司的C#笔试题面试题
2015/12/25 面试题
自荐信怎么写呢?
2013/12/09 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
母婴店促销方案
2014/03/05 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
清洁员岗位职责
2015/02/15 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python