PHP 与 js的通信(via ajax,json)

 更新时间:2010年11月16日 23:03:44   作者:  
一定要设置xmlHttp.setRequestHeader,否则传往PHP的参数会变成null(line 38)
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 +')');

相关文章

  • 微信小程序wx.request实现后台数据交互功能分析

    微信小程序wx.request实现后台数据交互功能分析

    这篇文章主要介绍了微信小程序wx.request实现后台数据交互功能,分析微信小程序wx.request在后台数据交互过程中遇到的问题与相关的解决方法,需要的朋友可以参考下
    2017-11-11
  • Javascript监视变量变化的方法

    Javascript监视变量变化的方法

    这篇文章主要介绍了Javascript监视变量变化的方法,涉及javascript针对变量的相关操作技巧,需要的朋友可以参考下
    2015-06-06
  • 微信小程序如何连接Java后台

    微信小程序如何连接Java后台

    这篇文章主要介绍了微信小程序如何连接Java后台,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript对象原型链原理详解

    JavaScript对象原型链原理详解

    这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 如何使用js查找数组中符合条件的元素

    如何使用js查找数组中符合条件的元素

    这篇文章主要给大家介绍了关于如何使用js查找数组中符合条件的元素,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-04-04
  • Javascript中构造函数要注意的一些坑

    Javascript中构造函数要注意的一些坑

    JavaScript语言是一门面向对象的语言,但JS中并没有类的概念的。于是JavaScript采用构造函数的方式来模拟类的效果,即我们通过函数来创建对象。这也证明了函数在JavaScript中具有非常重要的地位。本文主要介绍了Javascript中构造函数的一些坑,需要的朋友可以参考。
    2017-01-01
  • JavaScript中 创建动态 QML 对象的方法

    JavaScript中 创建动态 QML 对象的方法

    这篇文章主要介绍了 JavaScript中 创建动态 QML 对象,下面文章主要分析了两中方法,分别是从 QML 字符串创建对象和动态创建组件以及删除对象等方法,具有有一定的参考价值,需要的小伙伴可以参考一下
    2021-12-12
  • 如何利用unicloud生成微信小程序分享码

    如何利用unicloud生成微信小程序分享码

    这篇文章主要给大家介绍了关于如何利用unicloud生成微信小程序分享码的相关资料,这是最近工作中遇到的一个需求,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JavaScript宏任务(macrotask)和微任务(microtask) 执行顺序实例详解

    JavaScript宏任务(macrotask)和微任务(microtask) 执行顺序实例详解

    JavaScript是单线程指的是同一时间只能干一件事情,只有前面的事情执行完,才能执行后面的事情,这篇文章主要介绍了JavaScript宏任务(macrotask)和 微任务(microtask) 执行顺序,需要的朋友可以参考下
    2023-10-10
  • JavaScript 滚轮事件使用说明

    JavaScript 滚轮事件使用说明

    用过 Google 地图的人可能都很熟悉,通过滚动滚轮可以对地图进行缩放,非常地方便。适当地使用滚轮事件可以带来不错的用户体验。
    2010-03-03

最新评论