本篇內(nèi)容主要講解“jQuery下Ajax的調(diào)試步驟”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“jQuery下Ajax的調(diào)試步驟”吧!

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到蒲縣網(wǎng)站設(shè)計(jì)與蒲縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋蒲縣地區(qū)。

下面通過(guò)圖文并茂的方式給大家介紹jQuery下的Ajax調(diào)試步驟

在Ajax的使用過(guò)程中，最舒服的是一步成功，最頭痛的是不成功，但是不知道去哪里看錯(cuò)誤，然后看到錯(cuò)誤之后又是哪里出的問(wèn)題，所以今天說(shuō)一下Ajax的使用調(diào)試：

先給大家說(shuō)下項(xiàng)目需求：工具/原料，jQuery.js，編輯器，Chrome瀏覽器，wamp搭建環(huán)境

具體實(shí)現(xiàn)方法和步驟請(qǐng)看下文：

第一步：在同一目錄下創(chuàng)建ajax.html和ajax.php

第二步：編寫(xiě)ajax.html,注意修改文件編碼為utf-8,代碼如下：

 
  
 
 
  Ajax Test
 

在wamp環(huán)境下，瀏覽器運(yùn)行如圖：

第三步：編寫(xiě)ajax.php文件，注意修改文件編碼為utf-8,代碼如下：

在wamp環(huán)境下，使用瀏覽器運(yùn)行如圖：
第四步：在ajax.html的head中添加如下代碼：


function checkAjax(){
 $.ajax({
  url:"ajax.php",//請(qǐng)求的頁(yè)面地址
  type:'post', //請(qǐng)求數(shù)據(jù)的方式 get post 
  dataType:'text', //數(shù)據(jù)返回的方式 text html json 
  success:function(data) { 
          //請(qǐng)求之后，響應(yīng)成功執(zhí)行
         alert(data);
     },  
  error : function() { 
         //請(qǐng)求之后，響應(yīng)不成功或者有錯(cuò)誤執(zhí)行
         alert("異常！");  
     }
 });
}
當(dāng)前ajax.html代碼結(jié)構(gòu)如圖：
第五步：在wamp環(huán)境下，運(yùn)行Ajax.html,點(diǎn)擊Ajax Test按鈕，出現(xiàn)如圖彈框，說(shuō)明正常；若沒(méi)有結(jié)果，參考后面的排錯(cuò)方式.
第六步：看到這里，就說(shuō)明你有錯(cuò)誤出現(xiàn)，這之后就說(shuō)一下排錯(cuò)的方式：
首先，瀏覽器的空白處鼠標(biāo)右鍵-->審查元素，然后看有沒(méi)有如圖2所示的紅色‘x'號(hào)，有的話就是js的語(yǔ)法錯(cuò)誤，點(diǎn)擊紅色‘x'號(hào)，會(huì)定位到2，即是錯(cuò)誤文件的名稱，點(diǎn)擊后會(huì)定位到3，即語(yǔ)法錯(cuò)誤出現(xiàn)的位置或者此位置的前面有錯(cuò)誤；若是沒(méi)有，參考7
第七步：同樣的在第6步的基礎(chǔ)上，查看Network-->右側(cè)的Ajax.php-->Headers中的信息，若是200 ok，說(shuō)明文件路徑?jīng)]有問(wèn)題，若為其他的值，那么就要確定一下php文件的調(diào)用路徑；即使是200 ok，還要查看Preview選項(xiàng)下的內(nèi)容，此內(nèi)容即為php文件的輸出內(nèi)容：以Ajax.php為例，php文件輸出的是Ajax Test，在Preview顯示的就是Ajax Test。若是Preview輸出的是其他內(nèi)容如圖3，說(shuō)明php文件中有錯(cuò)誤。
第八步：以上說(shuō)了那么多，但是錯(cuò)誤的種類還有很多的樣式，不能夠一一列舉。但是總結(jié)思路：錯(cuò)誤出現(xiàn)了，首先去判斷錯(cuò)誤是html和php兩個(gè)文件，哪個(gè)文件出的錯(cuò)，然后再去對(duì)應(yīng)的文件中去解決。
其中第4步中的代碼可簡(jiǎn)寫(xiě)：


function checkAjax(){
 $.post('ajax.php',function(data){
   alert(data);
  },'text'
 );
}
主要是$.ajax和$.post的使用方式的區(qū)別，$.post使用較簡(jiǎn)單，但是$.ajax更有利于全面掌握理解。
到此，相信大家對(duì)“jQuery下Ajax的調(diào)試步驟”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
            
            
                        

            網(wǎng)站名稱：jQuery下Ajax的調(diào)試步驟            

            文章鏈接：http://weahome.cn/article/pssphd.html