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 相关文章推荐
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
javascript常见用法总结
May 22 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
layui文件上传实现代码
May 20 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
p5.js临摹动态图形的方法
Oct 23 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
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
PHP7新增函数
2021/03/09 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
document.createElement()用法
2013/03/13 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
javascript实现下雨效果
2017/03/27 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python 字符串和整数的转换方法
2018/06/25 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
python如何实现图片压缩
2020/09/11 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
法院授权委托书范文
2014/08/02 职场文书
七年级地理教学计划
2015/01/22 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书