【入门】PHP 与 js的通信(via ajax,json)
JavaScript端:
注意:一定要设置xmlHttp.setRequestHeader,否则传往PHP的参数会变成null(line 38)
亮点在line 31!

1 <script type="text/javascript">
2 function GetJson() {
3 var xmlHttp;
4 try {
5 // Firefox, Opera 8.0+, Safari
6 xmlHttp = new XMLHttpRequest();
7 }
8 catch (e) {
9 // Internet Explorer
10 try {
11 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
12 }
13 catch (e) {
14
15 try {
16 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
17 }
18 catch (e) {
19 alert("您的浏览器不支持AJAX!");
20 return false;
21 }
22 }
23 }
24
25 xmlHttp.onreadystatechange = function() {
26 if (xmlHttp.readyState == 4) {
27 //alert(xmlHttp.responseText);
28 var str = xmlHttp.responseText;
29 document.getElementById('show').innerHTML +=str;
30 //alert(str);
31 var obj = eval('('+ xmlHttp.responseText +')');
32 //var obj = eval(({"id":"123","name":"elar","age":"21"}));
33 alert(obj.name);
34 }
35 }
36 var data = "id=123";
37 xmlHttp.open("POST", "testJson.php", true);
38 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
39 xmlHttp.send("id=123");
40 }
41 </script>
42 <input type="button" onclick="GetJson()" value="按我!"/>
43 <hr />
44 <div id="show"></div>
PHP端【testJson.php】:
(注意,php文件要干净,<?php ?>标签的外部不能有其他标签,否则eval函数无法解析)
亮点在line 6
1 <?php
2 $res['id'] = $_POST['id'];
3 $res['name'] = "elar";
4 $res['age'] = "21";
5 $response = "hello this is response".$_POST['id'];
6 echo json_encode($res);
7 ?>
总结:
js要往PHP端送数据,用的是xmlHttp.send("id=123");
PHP给js送数据,用的是echo json_encode($res);(要注意变量$res的构造应符合JSON的规范)
js要解析PHP送来的JSON格式的数据,用var obj = eval('('+ xmlHttp.responseText +')');
----------关于 json VS eval 请 --Google
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)