Jquery使用Firefox FireBug外掛程式調試Ajax步驟解說_jquery

首先，我們用一個範例來說明JQuery的Ajax呼叫過程，

實現的一個功能是：點擊確認支付按鈕之後，實現餘額支付的功能：

1.首先在php頁面將相關需要呼叫的函數綁定到按鈕上：

複製程式碼 程式碼如下:

$(function(){

    $("#pay_btn").bind("click",ABC.balancePay);

});

2.腳本處：

如果使用$.post方式實作：

複製程式碼 程式碼如下:

var ABC = {

    balancePay: function(event){

        event.preventDefault();

        var tthis = $(event.currentTarget);

        var form = tthis.parents(‘form');

        var url = form.attr(‘action');

        var data = ‘code=15′ ;// $(‘#verifyCode').val();

        var jqXhr = $.post(url, data, undefined, ‘jsonp');

        jqXhr.done(function(datas){

                //console.log(‘這裡是由console印製出來的'); //#4

                $("#msg").text(‘結果:'data);

});

}

$.post方式也可以直接指定回呼函數：

複製程式碼 程式碼如下:

var jqXhr = $.post(url,url, function (data){

            $("#msg").text('結果:' data);

}, 'jsonp');

使用$.ajax方法實作：

複製程式碼 程式碼如下:

var jqXhr = $.post(url,url, function (data){

            $("#msg").text(‘結果:' data);

}, ‘jsonp');

使用$.ajax方法實作：

複製程式碼 程式碼如下:

var jqXhr = $.ajax({var jqXhr = $.ajax({

var jqXhr = $.ajax({

var jqXhr = $.ajax({

var jqXhr = $.ajax({

            type: ‘post',

            url: url,

            data: {code: ‘15′},

            dataType: ‘jsonp',

            sccuess:function(data){

            alert(‘good');},

            error: function(XMLHttpRequest, textStatus, errorThrown) {  //#3這個error      alert(XMLHttpRequest.status);

                     (XMLHttpRequest.readyState);

                           },

});

3.伺服器端：

複製程式碼

程式碼如下:

public function actionInterPayProc($callback)

{

//header("content-type: text/javascript");

//header(‘Content-type: text/html; charset=utf-8′);

         $code = $_POST['code'];

        //$code  //#1 此处给出一个有语法错误的表达式

        //echo $code;  //#2  此处标记，用于后面调试说明；

        …

        $result = 1;

            //echo $_POST['callback']. ‘(‘ . json_encode($result) . ‘);';//注意使用的编码方式需要和客户端请求保持一致；

exit(0);

}

调试工具

Firefox有强大FireBug 插件，现在比较新的浏览器如 Chrome 和 Safari，以及 IE 8都内置了调试工具，借助于这些调试工具，可以非常详细的查看 Ajax 的执行过程（chrome和firefox中调出调试工具的快捷键是ctrl+shift+c)；
以下使用FireBug；

1.使用firebug，查看回调：

对于Ajax方法，是通过异步执行的服务器端程序，如果服务器端出错，在页面上不会显示的，我们需要借助调试工具来查看；例如，将以上示例中#2的注释去掉，触发ajax请求一次，可以在控制台面板中查看到错误的返回结果：

如果是伺服器端程式出錯，也可以直接看到，出錯原因跟一般普通的頁面一樣，只不過是在ajax返回的面板中查看（web瀏覽器頁面中不會有任何顯示）。
這裡需要說明的是，如果在伺服器端使用了echo等方法將需要查看的變數列印出來了，那麼，ajax呼叫的結果一定是失敗的，因為這樣看上去的回調函數名稱被更改了，造成無法解析；

例如，列印的變數是333，那麼最後回呼的結果是：333ajaxcallbak(1);客戶端尋找333ajaxcallbak這個函數名，無法解析。

2.使用error函數列印錯誤訊息：

$.ajax()有一個error參數，可以指定一個函數，在請求失敗時，將呼叫此方法。這裡給出的信息，對於調試來說，非常有用；

error：function (XMLHttpRequest, textStatus, errorThrown)

error事件回傳的第一個參數XMLHttpRequest有一些有用的資訊：

XMLHttpRequest.readyState:

其傳回的狀態碼對應了一個錯誤說明：

狀態碼

0 －（未初始化）還沒有呼叫send()方法

1 －（載入）已呼叫send()方法，正在傳送請求

2 －（載入完成）send()方法執行完成，已經接收到全部回應內容

3 －（互動）正在解析回應內容

4 －（完成）回應內容解析完成，可以在客戶端呼叫了

XMLHttpRequest.status:

這裡回傳的狀態碼就是我們日常見到的HTTP狀態；例如404，表示沒有找到頁面；

textStatus:

"timeout", "error", "notmodified" 和 "parsererror"。

(默 識別: 自動判斷 (xml 或 html)) 請求失敗時呼叫時間。參數有以下三個：XMLHttpRequest 物件、錯誤訊息、（可選）擷取的錯誤物件。如果發生了錯誤，錯誤訊息（第二個參數）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。

透過這個error函數，程式出​​錯就很容易排查；

例如上面的#2處，去掉註釋，相當於更改了回呼函數名稱；在erro裡就會報：parsererror；

3.使用console.log印輸出：（alert()也可以）

這只是一個增強調試體驗的輔助方法。對於js中的關注變數跟踪，我們可透過alert()方法列印出來，不過彈出框頻繁會讓人煩躁。 console.log是一個替代方式，它是firebug插件的一個方法。 console.log印出來的變數結果會顯示在firebug的控制檯面板中；

可能的出錯原因：

1.如果回傳的結果格式不正確，在firebug中能看到結果；

2.對於JSON請求，對格式比較嚴格：

如果透過error函數打出來的報錯是：parsererror

可能的原因是伺服器端腳本編碼的問題；可以在服務端處理函數內處理的第一行加上對應的header資訊：

eg：header('Content-type: text/html; charset=utf-8');

當然，最有可能的是格式不正確：

複製程式碼 程式碼如下:

echo "{'re':'success'}" ;jquery不能解析
echo "{"re":"success"}";就沒有錯誤

不要輸出怪異的json格式的字串，要不jq1.4 版本不會執行success回呼。如{abc:1}或{'abc':1},要輸出

複製程式碼 程式碼如下:

{"abc":1}

{'success':true}改為{"success":true}