Ajax綜合應(yīng)用大全(全面解析)

image.png

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)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁(不使用 AJAX)如果需要更新內(nèi)容,必須重載整個(gè)網(wǎng)頁頁面。

?"xml": 返回 XML 文檔,可用jQuery處理。
?"html": 返回純文本 HTML 信息;包含的 script 標(biāo)簽會(huì)在插入 dom 時(shí)執(zhí)行。
?"script": 返回純文本 JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了 "cache" 參數(shù)。注意:在遠(yuǎn)程請求時(shí)(不在同一個(gè)域下),所有 POST 請求都將轉(zhuǎn)為 GET 請求。(因?yàn)閷⑹褂?DOM 的 script標(biāo)簽來加載)
?"json": 返回 JSON 數(shù)據(jù) 。
?"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時(shí),如"myurl?callback=?" jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。
?"text": 返回純文本字符串

一、前臺(tái)傳遞字符串變量,后臺(tái)返回字符串變量(非json格式)
 
  這里,為了解決Ajax數(shù)據(jù)傳遞出現(xiàn)的漢字亂碼,在字符串傳遞之前,使用javascript函數(shù)escape()對漢字字符串進(jìn)行了編碼,并且對返回

的字符串使用unescape()函數(shù)進(jìn)行解碼,使得漢字得以正常顯示。當(dāng)然了,后臺(tái)PHP代碼也添加了頭文件,以保證漢字字符串不會(huì)出現(xiàn)亂碼。各種后臺(tái)代碼解決

漢字亂碼問題的方式如下:

PHP:header('Content-Type:text/html;charset=GB2312'); </pre>
 <code>Javascript</code>代碼:
<pre> $(function(){
     var my_data="前臺(tái)變量";
     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編碼,使中文不會(huì)變成亂碼
     $backValue=$_POST['trans_data'];
     echo $backValue."+后臺(tái)返回";</pre>
二、前臺(tái)傳遞多個(gè)一維數(shù)組,后臺(tái)返回字符串變量(非json格式)

  在非json格式下,后臺(tái)只能返回字符串,如果想后臺(tái)返回?cái)?shù)組,可以采用json格式,在本文的后面會(huì)詳細(xì)介紹。
<code>Javascript</code>代碼:
<pre> $(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代碼:

      //讀取第一個(gè)數(shù)組
      $backValue="trans_data:";
      $trans=$_POST['trans_data'];
      foreach($trans as $value)
      {
          $backValue=$backValue." ".$value;
     }
     //讀取第二個(gè)數(shù)組
     $backValue=$backValue." , trans_data1:";
     $trans=$_POST['trans_data1'];
     foreach($trans as $value)
     {
         $backValue=$backValue." ".$value;
     }
     echo $backValue;

三、前臺(tái)傳遞多個(gè)一維數(shù)組,后臺(tái)返回二維數(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編碼,使中文不會(huì)變成亂碼    
     $backValue=array();
     $backValue[0]=$_POST['trans_data'];    
     $backValue[1]=$_POST['trans_data1'];
     echo json_encode($backValue);

四、前臺(tái)傳遞一維數(shù)組和二維數(shù)組,后臺(tái)返回二維數(shù)組(json格式)
<code>Javascript</code>代碼:

$(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編碼,使中文不會(huì)變成亂碼    
     $backValue=array();
     $backValue=$_POST['trans_data2'];    
     $backValue[2]=$_POST['trans_data'];    
     $backValue[3]=$_POST['trans_data1'];
     echo json_encode($backValue);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Php代碼 收藏代碼 ajax通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù)。jQuery 底層 AJAX 實(shí)現(xiàn)。簡單易用的高...
    Yumazhiyao閱讀 984評論 0 4
  • jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery...
    光劍書架上的書閱讀 1,206評論 0 15
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,546評論 0 7
  • 神說:“如果你所遺落的另一半靈魂仍然活在這個(gè)世上的某一個(gè)角落,你是否會(huì)認(rèn)出你的另一半靈魂呢”? 神在說這句話...
    灼灼不華閱讀 323評論 0 0
  • 在生活中,我喜歡關(guān)注不同方面的公眾號,微博,書籍等!每當(dāng)在生活中我總能有小竅門。例如,在煮飯時(shí)加鹽和醋,...
    熠馨閱讀 446評論 0 0

友情鏈接更多精彩內(nèi)容