首先,我們用一個範例來說明JQuery的Ajax呼叫過程,
實現的一個功能是:點擊確認支付按鈕之後,實現餘額支付的功能:
1.首先在php頁面將相關需要呼叫的函數綁定到按鈕上:
$(function(){
$("#pay_btn").bind("click",ABC.balancePay);
});
2.腳本處:
如果使用$.post方式實作:
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方式也可以直接指定回呼函數:
$("#msg").text('結果:' data);
}, 'jsonp');
使用$.ajax方法實作:
$("#msg").text(‘結果:' data);
}, ‘jsonp');
使用$.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);
},
3.伺服器端:
程式碼如下:{
//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');
當然,最有可能的是格式不正確:
不要輸出怪異的json格式的字串,要不jq1.4 版本不會執行success回呼。如{abc:1}或{'abc':1},要輸出
{'success':true}改為{"success":true}