Jquery使用Firefox FireBug插件調(diào)試Ajax步驟講解
首先，我們用一個(gè)示例來說明JQuery的Ajax調(diào)用過程，
實(shí)現(xiàn)的一個(gè)功能是：點(diǎn)擊確認(rèn)支付按鈕之后，實(shí)現(xiàn)余額支付的功能：
1.首先在php頁面將相關(guān)需要調(diào)用的函數(shù)綁定到按鈕上：
<input type="submit" name="pay_btn" id="pay_btn" value="確認(rèn)支付" />
<script type="text/javascript">
$(function(){
$("#pay_btn").bind("click",ABC.balancePay);
});
2.腳本處：
如果使用$.post方式實(shí)現(xiàn)：
var ABC = {
balancePay: function(event){
event.preventDefault();
var tthis = $(event.currentTarget);
var form = tthis.parents(‘form');
var url = form.attr(‘a(chǎn)ction');
var data = ‘code=15′ ;//+ $(‘#verifyCode').val();
var jqXhr = $.post(url, data, undefined, ‘jsonp');
jqXhr.done(function(datas){
//console.log(‘這里是通過console打印出來的'); //#4
$("#msg").text(‘結(jié)果:'+data);
});
}
$.post方式也可以直接指定回調(diào)函數(shù)：
var jqXhr = $.post(url, data, function(data){
$("#msg").text('結(jié)果:'+data);
}, 'jsonp');
使用$.ajax方法實(shí)現(xiàn)：
var jqXhr = $.post(url, data, function(data){
$("#msg").text(‘結(jié)果:'+data);
}, ‘jsonp');
使用$.ajax方法實(shí)現(xiàn)：
var jqXhr = $.ajax({
type: ‘post',
url: url,
data: {code: ‘15′},
dataType: ‘jsonp',
sccuess:function(data){
alert(‘good');},
error: function(XMLHttpRequest, textStatus, errorThrown) { //#3這個(gè)error函數(shù)調(diào)試時(shí)非常有用，如果解析不正確，將會(huì)彈出錯(cuò)誤框
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus); // paser error;
},
});
3.服務(wù)器端：
public function actionInterPayProc($callback)
{
//header("content-type: text/javascript");
//header(‘Content-type: text/html; charset=utf-8′);
$code = $_POST['code'];
//$code //#1 此處給出一個(gè)有語法錯(cuò)誤的表達(dá)式
//echo $code; //#2 此處標(biāo)記，用于后面調(diào)試說明；
…
$result = 1;
//echo $_POST['callback']. ‘(‘ . json_encode($result) . ‘);';//注意使用的編碼方式需要和客戶端請(qǐng)求保持一致；
exit(0);
}
調(diào)試工具
Firefox有強(qiáng)大FireBug 插件，現(xiàn)在比較新的瀏覽器如 Chrome 和 Safari，以及 IE 8都內(nèi)置了調(diào)試工具，借助于這些調(diào)試工具，可以非常詳細(xì)的查看 Ajax 的執(zhí)行過程（chrome和firefox中調(diào)出調(diào)試工具的快捷鍵是ctrl+shift+c)；
以下使用FireBug；
1.使用firebug，查看回調(diào)：
對(duì)于Ajax方法，是通過異步執(zhí)行的服務(wù)器端程序，如果服務(wù)器端出錯(cuò)，在頁面上不會(huì)顯示的，我們需要借助調(diào)試工具來查看；例如，將以上示例中#2的注釋去掉，觸發(fā)ajax請(qǐng)求一次，可以在控制臺(tái)面板中查看到錯(cuò)誤的返回結(jié)果：
 |
如果是服務(wù)器端程序出錯(cuò)，也可以直接看到，出錯(cuò)原因跟一般普通的頁面一樣，只不過是在ajax返回的面板中查看（web瀏覽器頁面中不會(huì)有任何顯示）。
這里需要說明的是，如果在服務(wù)器端使用了echo等方法將需要查看的變量打印出來了，那么，ajax調(diào)用的結(jié)果一定是失敗的，因?yàn)檫@樣看上去的回調(diào)函數(shù)名稱被更改了，造成無法解析；
例如，打印的變量是333，那么最后回調(diào)的結(jié)果是：333ajaxcallbak(1);客戶端尋找333ajaxcallbak這個(gè)函數(shù)名，無法解析。
2.使用error函數(shù)打印錯(cuò)誤信息：
$.ajax()有一個(gè)error參數(shù)，可以指定一個(gè)函數(shù)，在請(qǐng)求失敗時(shí)，將調(diào)用此方法。這里給出的信息，對(duì)于調(diào)試來說，非常有用；
error：function (XMLHttpRequest, textStatus, errorThrown)
error事件返回的第一個(gè)參數(shù)XMLHttpRequest有一些有用的信息：
XMLHttpRequest.readyState:
其返回的狀態(tài)碼對(duì)應(yīng)了一種錯(cuò)誤說明：
狀態(tài)碼
0 －（未初始化）還沒有調(diào)用send()方法
1 －（載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2 －（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3 －（交互）正在解析響應(yīng)內(nèi)容
4 －（完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了
XMLHttpRequest.status:
這里返回的狀態(tài)碼就是我們?nèi)粘Ｒ姷降腍TTP狀態(tài)；比如404，表示沒有找到頁面；
textStatus:
"timeout", "error", "notmodified" 和 "parsererror"。
(默 認(rèn): 自動(dòng)判斷 (xml 或 html)) 請(qǐng)求失敗時(shí)調(diào)用時(shí)間。參數(shù)有以下三個(gè)：XMLHttpRequest 對(duì)象、錯(cuò)誤信息、（可選）捕獲的錯(cuò)誤對(duì)象。如果發(fā)生了錯(cuò)誤，錯(cuò)誤信息（第二個(gè)參數(shù)）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。
通過這個(gè)error函數(shù)，程序出錯(cuò)就很容易排查；
比如上面的#2處，去掉注釋，相當(dāng)于更改了回調(diào)函數(shù)名；在erro里就會(huì)報(bào)：parsererror；
3.使用console.log打印輸出：（alert()也可以）
這只是一個(gè)增強(qiáng)調(diào)試體驗(yàn)的輔助方法。對(duì)于js中的關(guān)注變量跟蹤，我們可通過alert()方法打印出來，不過彈出框頻繁會(huì)讓人煩躁。console.log是一個(gè)替代方式，它是firebug插件的一個(gè)方法。console.log打印出來的變量結(jié)果會(huì)顯示在firebug的控制臺(tái)面板中；
可能的出錯(cuò)原因：
1.如果返回的結(jié)果格式不正確，在firebug中能看到結(jié)果；
2.對(duì)于JSON請(qǐng)求，對(duì)格式比較嚴(yán)格：
如果通過error函數(shù)打出來的報(bào)錯(cuò)是：parsererror
可能的原因是服務(wù)器端腳本編碼的問題；可以在服務(wù)端處理函數(shù)內(nèi)處理的第一行加上對(duì)應(yīng)的header信息：
eg：header('Content-type: text/html; charset=utf-8');
當(dāng)然，最有可能的是格式不正確：
echo "{'re':'success'}";jquery不能解析
echo "{\"re\":\"success\"}";就沒有錯(cuò)誤
不要輸出怪異的json格式的字符串，要不jq1.4+版本不會(huì)執(zhí)行success回調(diào)。如{abc:1}或者{'abc':1},要輸出
{"abc":1}
{'success':true}改為{"success":true}
相關(guān)文章
日期函數(shù)在程序開發(fā)中是一個(gè)重要的工具,js也提供了Date()函數(shù),如獲取當(dāng)前時(shí)間,當(dāng)前年月,已經(jīng)系統(tǒng)時(shí)間的毫秒數(shù)。2016-10-10
jquery實(shí)現(xiàn)可自動(dòng)判斷位置的彈出層效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可自動(dòng)判斷位置的彈出層效果代碼,可實(shí)現(xiàn)根據(jù)鼠標(biāo)位置進(jìn)行合理的判斷并顯示彈出層的功能,涉及jQuery鼠標(biāo)事件及頁面元素位置屬性的相關(guān)判定技巧,需要的朋友可以參考下2015-10-10
Jquery插件之Fancybox豐富的彈出層效果附源碼下載
Fancybox是一款優(yōu)秀的jquery插件，它能夠展示豐富的彈出層效果，相比facybox，fancybox顯得功能更為齊全，它除了可以加載DIV，圖片、圖片集、Ajax數(shù)據(jù)，還能加載SWF影片，iframe頁面等等2015-12-12
jQuery源碼解讀之a(chǎn)ddClass()方法分析
這篇文章主要介紹了jQuery源碼解讀之a(chǎn)ddClass()方法,注釋形式較為詳細(xì)的分析了addClass()方法的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開折疊效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開折疊效果,涉及jquery中fadeIn與fadeOut實(shí)現(xiàn)折疊與展開頁面元素的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理，是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)2017-03-03
JQuery學(xué)習(xí)筆記 nt-child的使用
在使用JQuery的時(shí)候如果你想尋找某個(gè)容器（諸如div或者是table中的某些子元素），那么很容易就使用find方法。2011-01-01
如何讓瀏覽器支持jquery ajax load 前進(jìn)、后退功能
在做 ajax load 的時(shí)候，很多人都不會(huì)考慮到需要瀏覽器支持前進(jìn)后退功能，本例讓瀏覽器支持jquery ajax load 前進(jìn)、后退 功能,需要的朋友可以參考下2014-06-06
這篇文章介紹了jQuery中的事件，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
jQuery Study Notes學(xué)習(xí)筆記 (二)
jquery簡(jiǎn)單選擇器的使用方法。jquery中最基本的東西了。2010-08-08