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

來源:互聯網
上載者:User

首先,我們用一個樣本來說明JQuery的Ajax調用過程,

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

1.首先在php頁面將相關需要調用的函數綁定到按鈕上:

複製代碼 代碼如下:

<input type="submit" name="pay_btn" id="pay_btn" value="確認支付" />

<script type="text/javascript">

$(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, data, function(data){

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

}, 'jsonp');

使用$.ajax方法實現:

複製代碼 代碼如下:

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

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

}, ‘jsonp');

使用$.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);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus); // paser error;
                    },

});

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}

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.