JavaScript与PHP通过AJAX传输JSON数据的完整流程
本文详细解析JavaScript与PHP之间通过AJAX进行JSON数据通信的完整流程。涵盖前端JSON对象的构建与序列化、AJAX请求的配置与发送，以及后端PHP对JSON字符串的接收、解码、数组转换及数据库操作。同时介绍了处理中文乱码、URL编码及数据压缩等关键细节，提供前后端双向数据交互的实用代码示例。
JavaScript与PHP通过AJAX传输JSON数据的完整流程
在Web开发中，JavaScript与PHP之间的通信通常借助AJAX技术实现，以支持用户界面（UI）的动态更新。双方交换数据时，常采用JSON或XML格式，本文将重点阐述如何在这两种语言间直接传递JSON字符串。
以下案例旨在演示如何传递特定结构的JSON数据。
{
"bookid": "558a6be36c72a" ，
"resitems": [
{
"res_id": "558a6bff6bd55",
"res_name": "IMG_8421.jpg",
"src_origin": "558a6bff6bd55.jpg",
"src_hd": "558a6bff6bd55_hd_1920_1280.jpg",
"src_sd": "558a6bff6bd55_sd_1024_682.jpg",
"src_td": "558a6bff6bd55_td_300_200.jpg"
},
{
"res_id": "558a6c4a716a2",
"res_name": "IMG_8477.jpg",
"src_origin": "558a6c4a716a2.jpg",
"src_hd": "558a6c4a716a2_hd_1920_1280.jpg",
"src_sd": "558a6c4a716a2_sd_1024_682.jpg",
"src_td": "558a6c4a716a2_td_300_200.jpg"
}
]
}AJAX通信机制解析
AJAX通信机制解析
掌握AJAX的基本用法至关重要，它是连接浏览器客户端与服务器端的桥梁。
AJAX的标准调用方式如下所示：
$.ajax({
type:"POST",
url:"SQLHelper.php",
dataType:'json',
async:false,
data:{'json':jsonStr}
});在上述配置中，type参数指定请求方法，可选GET或POST；url指向服务器端处理脚本。dataType定义预期返回数据类型，如text、json或xml等；async参数通常设为false以同步执行。data参数用于传递具体的JSON字符串，此处通过POST方式向服务器发送名为json的字段，PHP端可通过$_POST['json']获取该数据。若需接收服务器返回的数据，
var req= $.ajax({
type:"POST",
url:"SQLHelper.php",
dataType:'json',
async:false,
data:{'json':jsonStr}
});
var response=req.responseText;上述代码展示了从客户端到服务器的一次常规数据传递过程。接下来探讨如何生成前述的jsonStr，即如何构造如开篇所述格式的JSON字符串。附注：若URL中包含中文，需按以下方式处理：
location=encodeURI('content_p.html?id='+catalogid+'&title='+bookTitle+'&thumb='+bookThumb);
从JavaScript向PHP传输数据
从JavaScript向PHP传输数据
利用JavaScript数组来封装JSON对象：
var arrX={resitems:[]};
arrX.bookid=bookid;
for (var i=0; i < cellList.length; i++) {
var item=cellList[i];
var jsonRes={};
jsonRes.bookid=bookid;
jsonRes.res_id=item.itemStruct.id;
jsonRes.res_name=item.itemStruct.name;
jsonRes.src_origin=item.itemStruct.src;
jsonRes.src_hd=item.itemStruct.src_hd;
jsonRes.src_sd=item.itemStruct.src_sd;
jsonRes.src_td=item.itemStruct.src_td;
arrX.resitems.push(jsonRes);
};
var jsonResStr=JSON.stringify(arrX);上述代码首先创建名为arrX的JSON对象，并向其中添加各类属性与变量。随后通过JSON.stringify方法将其转换为字符串，得到的jsonResStr即为普通字符串，可通过AJAX传递至服务器。值得注意的是，若数据包含中文字符，此过程不会导致乱码。完成JSON封装后，即可使用AJAX将数据发送至PHP页面。
$.ajax({
type:"POST",
url:"SQLHelper.php",
dataType:"json",
async:false,
data:{'jsonResPanel':jsonResStr},
success:function(json){}
});PHP接收JSON数据并写入数据库
PHP接收JSON数据并写入数据库
if (isset($_POST['jsonResPanel'])) {
$data=$_POST['jsonResPanel'];
$arr=(array)(json_decode($data));
$items=(array)($arr['resitems']);
$bookid=$arr['bookid'];
$sql="";
for ($i=0; $i < count($items); $i++) {
$value=(array)($items[$i]);
$bookid=$value['bookid'];
$res_id=$value['res_id'];
$res_name=$value['res_name'];
$src_origin=$value['src_origin'];
$src_hd=$value['src_hd'];
$src_sd=$value['src_sd'];
$src_td=$value['src_td'];
$sql.="insert into resourcesheet(bookid,res_id,res_name,src_origin,src_hd,src_sd,src_td)values
('{$bookid}','{$res_id}','{$res_name}','{$src_origin}','{$src_hd}','{$src_sd}','{$src_td}');";
}
$sqli=new SQLHelper('ugumanage');
//先删除bookid下所有资源
$sqlDelete="delete from resourcesheet where bookid='{$bookid}'";
$sqli->execute_dml($sqlDelete);
$sqli->multi_execute_dml($sql);
$sqli->close_connect();
}需特别注意，PHP在获取json字符串后，使用json_decode函数将其解析为对象。此时得到的仅是普通PHP对象，无法直接提供有效信息，需强制转换为数组（array）以转换为熟悉的PHP数组格式。获取信息数组后，即可像操作普通PHP数组那样提取JSON传递的所有信息。上述代码将JSON的部分信息添加至数据库的指定表中。此外，若传递的JSON字符串过长，建议在客户端使用GZip压缩后再传输，接收端再进行解压缩。
从PHP向JavaScript返回数据
从PHP向JavaScript返回数据
若客户端需要查询数据库数据，必然要求服务器执行查询，并由PHP将查询结果通过JSON格式返回给客户端。
首先，客户端通过AJAX向PHP发送查询请求：
var request=$.ajax({url:'SQLHelper.php?loadResPanel='+bookid,async:false});
var jsonStr=request.responseText; 第二行代码表示获取到了查询结果，下面来看看PHP端如何生成该结果并返回。
if (isset($_REQUEST['loadResPanel'])) {
$bookid=$_REQUEST['loadResPanel'];
$sqli=new SQLHelper('ugumanage');
$arr=array();
$arrItems=array();
$arrInfo=array();
$head=urlencode("http://{$_SERVER['HTTP_HOST']}/cloud/");
$sql0="select *from contentsheet where bookid='{$bookid}'";
$res0=$sqli->execute_dql($sql0);
while ($row0=$res0->fetch_assoc()) {
$catalogid=$row0['catalogid'];
$bookid=$row0['bookid'];
$title=urlencode($row0['title']);
}
$sql1="select *from resourcesheet where bookid='{$bookid}'";
$res1=$sqli->execute_dql($sql1);
while ($row1=$res1->fetch_assoc()) {
$item=array('bookid'=>$row1["bookid"],'res_id'=>$row1['res_id'],'res_name'=>urlencode($row1["res_name"]),
'src_origin'=>$row1["src_origin"],'src_hd'=>$row1["src_hd"],'src_sd'=>$row1["src_sd"],'src_td'=>$row1["src_td"]);
array_push($arrItems,$item);
}
$arrInfo['head']=$head;
$arrInfo['catalogid']=$catalogid;
$arrInfo['bookid']=$bookid;
$arrInfo['title']=$title;
$arr['info']=$arrInfo;
$arr['items']=$arrItems;
$json=urldecode(json_encode($arr)) ;
echo $json;
$sqli->close_connect();
}值得注意的是第七行代码，遇到特殊符号或中文字符时，PHP端需统一进行转码。具体转码结果无需关心，只需在外层包裹urlencode函数即可。创建JSON同样使用数组，编制好数组后，通过json_encode可直接将其转化为JSON字符串。在返回给客户端之前，仍需使用urldecode进行解码，以确保传递出的JSON字符串无乱码现象。
客户端接收到JSON字符串后，同样需要对其进行解析，转换为JavaScript对象。
var request=$.ajax({url:'SQLHelper.php?loadResPanel='+bookid,async:false});
var jsonStr=request.responseText;
var jsonObj=JSON.parse(jsonStr);
var info=jsonObj.info;
var items=jsonObj.items;
document.getElementById('textBox').value=info.title;
for (var i=0; i < items.length; i++) {
var item=new UploadItemStruct();
item.id=items[i].res_id;
item.head=info.head;
item.name=items[i].res_name;
// item.type=$(this).attr('type');
item.src=items[i].src_origin;
item.src_hd=items[i].src_hd;
item.src_sd=items[i].src_sd;
item.src_td=items[i].src_td;
addCellSubThree(document.getElementById("divPanel"),item);
}; 需注意第四行代码。解析JSON的关键方法是JSON.parse，将JSON字符串转换为JavaScript对象后，即可任意提取JSON传递过来的信息。
以上关于JavaScript与PHP使用AJAX通信传递JSON的实例即为全部内容，希望能为大家提供参考，也希望大家多多支持本站。
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办？常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js，怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26