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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
javascript preload&amp;lazy load
May 13 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
JS中一些高效的魔法运算符总结
May 06 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
js输出列表实现代码
2010/09/12 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
python输入错误密码用户锁定实现方法
2017/11/27 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python代码过长的换行方法
2018/07/19 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python中count函数简单用法
2020/01/05 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
python如何实现DES加密
2020/09/21 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
融资租赁计划书
2014/04/29 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
导游欢迎词范文
2015/01/23 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS