萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> Jquery使用Firefox FireBug插件調試Ajax步驟講解

Jquery使用Firefox FireBug插件調試Ajax步驟講解

 本文介紹Jquery下的Ajax調試方法,Jquery Ajax 提供了全功能的 $.ajax() 方法,還有諸如 $.get(),$.getScript(),$.getJSON(),$.post() 和 $().load() 等更為簡便的方法

首先,我們用一個示例來說明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}
copyright © 萬盛學電腦網 all rights reserved