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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
七个很有意思的PHP函数
May 12 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python简单读取json文件功能示例
2017/11/30 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
一年级班主任感言
2014/03/08 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android