AJAX = 非同步 JavaScript 和 XML,AJAX 是一種用於建立快速動態網頁的技術。本文為大家帶來了全面解析Ajax綜合應用大全,非常不錯具有參考借鑒價值,有興趣的朋友一起看下吧
AJAX即「Asynchronous Javascript And XML」(非同步JavaScript和XML),是指一種創建互動式網頁應用的網頁開發技術。
AJAX = 非同步 JavaScript和XML(標準通用標記語言的子集)。
AJAX 是一種用於建立快速動態網頁的技術。
透過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某個部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。
•"xml": 傳回 XML 文檔,可用 jQuery 處理。
•"html": 傳回純文字 HTML 資訊;所包含的 script 標籤會在插入 dom 時執行。
•"script": 傳回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了 "cache" 參數。注意:在遠端請求時(不在同一個網域下),所有 POST 請求都會轉為 GET 請求。 (因為將使用 DOM 的 script標籤來載入)
•"json": 傳回 JSON 資料 。
•"jsonp": JSONP 格式。使用 JSONP 形式呼叫函數時,如 "myurl?callback=?" jQuery 會自動取代 ? 為正確的函式名,以執行回呼函數。
•"text": 傳回純文字字串
一、前台傳遞字串變量,後台傳回字串變數(非json格式)
這裡,為了解決Ajax資料傳遞出現的漢字亂碼,在字串傳遞之前,使用javascript函數escape()對漢字字串進行了編碼,並且對返回
的字串使用unescape()函數進行解碼,使得漢字得以正常顯示。當然了,後台PHP程式碼也加入了頭文件,以確保漢字字串不會出現亂碼。各種後台程式碼解決
漢字亂碼問題的方式如下:
PHP:
header('Content-Type:text/html;charset=GB2312');
Javascript程式碼:
$(function(){ var my_data="前台变量"; my_data=escape(my_data)+"";//编码,防止汉字乱码 $.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){//如果调用php成功 alert(unescape(data));//解码,显示汉字 } }); });
PHP程式碼:
#header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码 $backValue=$_POST['trans_data']; echo $backValue."+后台返回";
##二、前台傳遞多個一維數組,後台傳回字串變數(非json格式)
在非json格式下,後台只能傳回字串,如果想後台回傳數組,可以採用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,status){//如果调用php成功 alert(data); } }); });
PHP程式碼:
//读取第一个数组 $backValue="trans_data:"; $trans=$_POST['trans_data']; foreach($trans as $value) { $backValue=$backValue." ".$value; } //读取第二个数组 $backValue=$backValue." , trans_data1:"; $trans=$_POST['trans_data1']; foreach($trans as $value) { $backValue=$backValue." ".$value; } echo $backValue;
三、前台傳遞多個一維數組,後台返回二維數組(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){//如果调用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);
#四、前台傳遞一維數組和二維數組,後台返回二維數組(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){//如果调用php成功 } alert(back); } }); });
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);
使用Nginx 反向代理來避免ajax 跨域請求的方法
以上是全面解析Ajax綜合應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!