全面解析Ajax綜合應(yīng)用(全)
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
AJAX = 異步 JavaScript和XML(標(biāo)準(zhǔn)通用標(biāo)記語言的子集)。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(不使用 AJAX)如果需要更新內(nèi)容,必須重載整個網(wǎng)頁頁面。
•"xml": 返回 XML 文檔,可用 jQuery 處理。
•"html": 返回純文本 HTML 信息;包含的 script 標(biāo)簽會在插入 dom 時執(zhí)行。
•"script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設(shè)置了 "cache" 參數(shù)。注意:在遠(yuǎn)程請求時(不在同一個域下),所有 POST 請求都將轉(zhuǎn)為 GET 請求。(因?yàn)閷⑹褂?DOM 的 script標(biāo)簽來加載)
•"json": 返回 JSON 數(shù)據(jù) 。
•"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。
•"text": 返回純文本字符串
一、前臺傳遞字符串變量,后臺返回字符串變量(非json格式)
這里,為了解決Ajax數(shù)據(jù)傳遞出現(xiàn)的漢字亂碼,在字符串傳遞之前,使用javascript函數(shù)escape()對漢字字符串進(jìn)行了編碼,并且對返回
的字符串使用unescape()函數(shù)進(jìn)行解碼,使得漢字得以正常顯示。當(dāng)然了,后臺PHP代碼也添加了頭文件,以保證漢字字符串不會出現(xiàn)亂碼。各種后臺代碼解決
漢字亂碼問題的方式如下:
PHP:header('Content-Type:text/html;charset=GB2312');
Javascript代碼:
$(function(){ var my_data="前臺變量"; my_data=escape(my_data)+"";//編碼,防止?jié)h字亂碼 $.ajax({ url: "ajax_php.php", type: "POST", data:{trans_data:my_data}, //dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data,status){//如果調(diào)用php成功 alert(unescape(data));//解碼,顯示漢字 } }); });
PHP代碼:
header('Content-Type:text/html; charset=gb2312');//使用gb2312編碼,使中文不會變成亂碼 $backValue=$_POST['trans_data']; echo $backValue."+后臺返回";
二、前臺傳遞多個一維數(shù)組,后臺返回字符串變量(非json格式)
在非json格式下,后臺只能返回字符串,如果想后臺返回數(shù)組,可以采用json格式,在本文的后面會詳細(xì)介紹。
Javascript代碼:
$(function(){ var my_data=new Array(); var my_data1=new Array(); my_data[0]=0; my_data[1]=1; my_data[2]=2; my_data1[0]=10; my_data1[1]=11; my_data1[2]=12; $.ajax({ url: "ajax_php.php", type: "POST", data:{trans_data:my_data,trans_data1:my_data1}, //dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data,status){//如果調(diào)用php成功 alert(data); } }); });
PHP代碼:
//讀取第一個數(shù)組 $backValue="trans_data:"; $trans=$_POST['trans_data']; foreach($trans as $value) { $backValue=$backValue." ".$value; } //讀取第二個數(shù)組 $backValue=$backValue." , trans_data1:"; $trans=$_POST['trans_data1']; foreach($trans as $value) { $backValue=$backValue." ".$value; } echo $backValue;
三、前臺傳遞多個一維數(shù)組,后臺返回二維數(shù)組(json格式)
Javascript代碼:
$(function(){ var my_data=new Array(); var my_data1=new Array(); my_data[0]=0; my_data[1]=1; my_data[2]=2; my_data1[0]=10; my_data1[1]=11; my_data1[2]=12; $.ajax({ url: "ajax_php.php", type: "POST", data:{trans_data:my_data,trans_data1:my_data1}, dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data){//如果調(diào)用php成功 } alert(back); } }); });
PHP代碼:
header('Content-Type:text/html; charset=gb2312');//使用gb2312編碼,使中文不會變成亂碼 $backValue=array(); $backValue[0]=$_POST['trans_data']; $backValue[1]=$_POST['trans_data1']; echo json_encode($backValue);
四、前臺傳遞一維數(shù)組和二維數(shù)組,后臺返回二維數(shù)組(json格式)
Javascript代碼:
$(function(){ var my_data=new Array(); var my_data1=new Array(); var my_data2=new Array(); my_data[0]=0; my_data[1]=1; my_data[2]=2; my_data1[0]=10; my_data1[1]=11; my_data1[2]=12; my_data2[0]=my_data; my_data2[1]=my_data1; $.ajax({ url: "ajax_php.php", type: "POST", data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2}, dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data){//如果調(diào)用php成功 } alert(back); } }); });
PHP代碼:
header('Content-Type:text/html; charset=gb2312');//使用gb2312編碼,使中文不會變成亂碼 $backValue=array(); $backValue=$_POST['trans_data2']; $backValue[2]=$_POST['trans_data']; $backValue[3]=$_POST['trans_data1']; echo json_encode($backValue);
以上內(nèi)容是小編給大家介紹的全面解析Ajax綜合應(yīng)用大全,希望能夠幫助到大家!
相關(guān)文章
Ajax向后臺傳json格式的數(shù)據(jù)出現(xiàn)415錯誤的原因分析及解決方法
ajax往后臺傳json格式數(shù)據(jù)報415錯誤,什么原因?qū)е碌哪?,該怎么解決呢?下面腳本之家小編給大家?guī)砹薃jax向后臺傳json格式的數(shù)據(jù)出現(xiàn)415錯誤的原因分析及解決方法感興趣的朋友一起看看吧2016-10-10關(guān)于前端ajax請求的優(yōu)雅方案(http客戶端為axios)
這篇文章主要給大家介紹了關(guān)于前端ajax請求的優(yōu)雅方案,本文http客戶端為axios,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12js實(shí)現(xiàn)簡單實(shí)用的AJAX完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡單實(shí)用的AJAX的方法,以完整實(shí)例形式分析了ajax無刷新調(diào)用的具體實(shí)現(xiàn)步驟與相關(guān)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2016-02-02使用getJSON()異步請求服務(wù)器返回json格式數(shù)據(jù)的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄褂胓etJSON()異步請求服務(wù)器返回json格式數(shù)據(jù)的實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06jQuery Ajax 實(shí)例詳解 ($.ajax、$.post、$.get)
本文給大家分享jquery ajax實(shí)例文章,由于jquery在異步提交方面封裝的非常好,直接用ajax非常麻煩,jquery大大簡化了我們的操作,不用考慮瀏覽器的問題了。對jquery ajax實(shí)例相關(guān)介紹感興趣的朋友一起學(xué)習(xí)吧2015-11-11xmlhttp 亂碼 比較完整的解決方法 (UTF8,GB2312 編碼 解碼)
xmlhttp 亂碼 比較完整的解決方法 (UTF8,GB2312 編碼 解碼)...2007-09-09