這篇文章給大家介紹如何在javascript和php中使用ajax通信傳遞JSON，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
重慶分公司
重慶分公司
{
"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的用法，它是連接瀏覽器和服務(wù)器的橋梁。
一般用法如下：
$.ajax({
type:"POST",
url:"SQLHelper.php",
dataType:'json',
async:false,
data:{'json':jsonStr}
});其中type的類(lèi)型可以是GET和POST，url是服務(wù)器處理的腳本程序。dataType類(lèi)型有text,json,xml等等，async通常使用false，data是具體要傳遞的json字符串，并且給服務(wù)器post一個(gè)叫做json字段的數(shù)據(jù)，PHP端可以$_POST['json']就可以獲取post過(guò)來(lái)的數(shù)據(jù)。如果需要接收返回?cái)?shù)據(jù)，
var req= $.ajax({
type:"POST",
url:"SQLHelper.php",
dataType:'json',
async:false,
data:{'json':jsonStr}
});
var response=req.responseText;上面使用ajax實(shí)現(xiàn)了一次普通的客戶(hù)端到服務(wù)器的一次數(shù)據(jù)傳遞。下面的問(wèn)題是怎么去獲得上面的jsonStr呢？像開(kāi)篇提及的那種json字符串怎么才能生成的問(wèn)題 附：如果遇到含有中文的url 如下操作：
location=encodeURI('content_p.html?id='+catalogid+'&title='+bookTitle+'&thumb='+bookThumb);JavaScript->PHP:
使用js數(shù)組來(lái)完成json對(duì)象的封裝：
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);上面的代碼是先創(chuàng)建arrX的json對(duì)象，對(duì)對(duì)象添加各種屬性、變量等。最后通過(guò)stringify轉(zhuǎn)化為字符串，這個(gè)獲得的字符串jsonResStr就是一個(gè)普通字符串了，可以通過(guò)ajax傳遞到服務(wù)器了，值得注意的是，這里如果有中文，那是沒(méi)問(wèn)題的，不會(huì)出現(xiàn)亂碼問(wèn)題。在完成了JOSN封裝之后，開(kāi)始使用ajax傳遞到PHP頁(yè)面
$.ajax({
type:"POST",
url:"SQLHelper.php",
dataType:"json",
async:false,
data:{'jsonResPanel':jsonResStr},
success:function(json){}
});php對(duì)接收到的json數(shù)據(jù)解析并且寫(xiě)入到數(shù)據(jù)庫(kù)：
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();
}需要注意的是第三號(hào)在拿到j(luò)son字符串之后便使用json_decode函數(shù)解析成對(duì)象，這個(gè)時(shí)候只是一個(gè)普通php對(duì)象，無(wú)法給我提供有效信息，需要將它強(qiáng)制轉(zhuǎn)換為數(shù)組array即可變?yōu)槲覀兪煜さ膒hp數(shù)組，在拿到信息的數(shù)組之后，我們便可以像操作普通php數(shù)組那樣提取json傳遞過(guò)來(lái)的所有信息了，上面代碼將json的部分信息添加到數(shù)據(jù)庫(kù)的一張表里邊，當(dāng)然如果傳遞的json字符串過(guò)長(zhǎng)，建議使用GZip在客戶(hù)端對(duì)字符串壓縮之后再傳遞，接收端解壓縮即可。
PHP->JavaScript：
如果客戶(hù)端需要查詢(xún)數(shù)據(jù)庫(kù)的數(shù)據(jù)，必然需要要求服務(wù)器查詢(xún)，由php將查詢(xún)結(jié)果通過(guò)json返回給客戶(hù)端。
首先客戶(hù)端通過(guò)ajax發(fā)送查詢(xún)請(qǐng)求給php
var request=$.ajax({url:'SQLHelper.php?loadResPanel='+bookid,async:false});var jsonStr=request.responseText;
第二行表示得到了查詢(xún)結(jié)果，下面來(lái)看看在php端是怎么生成這個(gè)結(jié)果并返回的。
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();
}值得注意的是第七行這種，遇到特殊符號(hào)或者中文字符，在php端需要將它們統(tǒng)一轉(zhuǎn)碼，具體轉(zhuǎn)成了什么，我們不用關(guān)心，只需要知道在外面套一個(gè)urlencode函數(shù)就可以了。創(chuàng)建json同樣是使用數(shù)組，編制好數(shù)組之后，通過(guò)json_encode可以直接將其轉(zhuǎn)化為json字符串。這里在返回給客戶(hù)端之前，仍然需要再使用urldecode解碼，這樣傳遞出來(lái)的json字符串才不會(huì)有亂碼現(xiàn)象。
客戶(hù)端接收到j(luò)son字符串后同樣需要對(duì)它進(jìn)行解析成javascript對(duì)象。
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);
};JavaScript的特點(diǎn)1.JavaScript主要用來(lái)向HTML頁(yè)面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁(yè)面，但寫(xiě)成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行。
關(guān)于如何在javascript和php中使用ajax通信傳遞JSON就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
