首頁 > web前端 > js教程 > 主體

全面解析Ajax綜合應用

亚连
發布: 2018-05-23 17:16:47
原創
1537 人瀏覽過

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);
}
});
});
登入後複製

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);
登入後複製

##上面是我整理給大家的,希望未來對大家有幫助。

相關文章:

使用Nginx 反向代理來避免ajax 跨域請求的方法


深入淺析Nginx實作AJAX跨域請求問題


#全面解析$.Ajax()方法參數(圖文教學)


以上是全面解析Ajax綜合應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板