jQuery之Ajax偵錯

2019-12-12 22:43:55

在Ajax的使用過程中，最舒服的是一步成功，最頭痛的是不成功，但是不知道去哪裡看錯誤，然後看到錯誤之後又是哪裡出的問題，所以今天說一下Ajax的使用偵錯：

1

在同一目錄下建立ajax.html和ajax.php

2

編寫ajax.html,注意修改檔案編碼為utf-8,程式碼如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

在wamp環境下，瀏覽器執行如圖：

3

編寫ajax.php檔案，注意修改檔案編碼為utf-8,程式碼如下：

<?php

echo "Ajax Test";

在wamp環境下，使用瀏覽器執行如圖：

4

在ajax.html的head中新增如下程式碼：

function checkAjax(){

$.ajax({

url:"ajax.php",//請求的頁面地址

type:'post', //請求資料的方式 get post

dataType:'text', //資料返回的方式 text html json

success:function(data) {

//請求之後，響應成功執行

alert(data);

error : function() {

//請求之後，響應不成功或者有錯誤執行

alert("異常！");

}

});

}

</script>

當前ajax.html程式碼結構如圖：

5

在wamp環境下，執行Ajax.html,點選Ajax Test按鈕，出現如圖彈框，說明正常；若沒有結果，參考後面的排錯方式.

6

看到這裡，就說明你有錯誤出現，這之後就說一下排錯的方式：

首先，瀏覽器的空白處滑鼠右鍵-->審查元素，然後看有沒有如圖2所示的紅色‘x’號，有的話就是js的語法錯誤，點選紅色‘x’號，會定位到2，即是錯誤檔案的名稱，點選後會定位到3，即語法錯誤出現的位置或者此位置的前面有錯誤；若是沒有，參考7

7

同樣的在第6步的基礎上，檢視Network-->右側的Ajax.php-->Headers中的資訊，若是200 ok，說明檔案路徑沒有問題，若為其他的值，那麼就要確定一下php檔案的呼叫路徑；即使是200 ok，還要檢視Preview選項下的內容，此內容即為php檔案的輸出內容：以Ajax.php為例，php檔案輸出的是Ajax Test，在Preview顯示的就是Ajax Test。若是Preview輸出的是其他內容如圖3，說明php檔案中有錯誤。

8

以上說了那麼多，但是錯誤的種類還有很多的樣式，不能夠一一列舉。但是總結思路：錯誤出現了，首先去判斷錯誤是html和php兩個檔案，哪個檔案出的錯，然後再去對應的檔案中去解決。其中第4步中的程式碼可簡寫：<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function checkAjax(){?$.post('ajax.php',function(data){? ? ?alert(data);? ? },'text'?);}</script>主要是$.ajax和$.po

st的使用方式的區別，$.post使用較簡單，但是$.ajax更有利於全面掌握理解

jQuery之Ajax偵錯

1

2

3

4

5

6

7

8

熱門文章