Jquery uses Firefox FireBug plug-in to debug Ajax steps explained_jquery

First, we use an example to illustrate JQuery’s Ajax calling process,

One function implemented is: after clicking the confirm payment button, the balance payment function is implemented:

1. First bind the relevant functions that need to be called to the button on the php page:

Copy code The code is as follows:

$(function(){

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

});

2. Script Office:

If using $.post method:

Copy code The code is as follows: 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('This is printed through the console'); //#4

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

});

}

$.post method can also directly specify the callback function:

Copy code The code is as follows: var jqXhr = $.post(url, data, function (data){ $("#msg").text('Result:' data);

}, 'jsonp');

Use $.ajax method to achieve:

Copy code The code is as follows: var jqXhr = $.post(url, data, function (data){ $("#msg").text('Result:' data);

}, ‘jsonp’);

Use $.ajax method to achieve:

Copy code The code is as follows: var jqXhr = $.ajax({ type: ‘post’,

url: url,

data: {code: ‘15′},

dataType: ‘jsonp’,

sccuess:function(data){

alert(‘good’);},

error: function(XMLHttpRequest, textStatus, errorThrown) { // #3 This error function is very useful for debugging. If the parsing is incorrect, an error box will pop up. alert (XMLHttpRequest.readyState); ; });

3. Server side:

Copy code

The code is as follows: 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请求一次，可以在控制台面板中查看到错误的返回结果：

If there is an error in the server-side program, you can also see it directly. The cause of the error is the same as that of an ordinary page, but it is just viewed in the panel returned by ajax (nothing will be displayed in the web browser page). It should be noted here that if echo and other methods are used on the server side to print out the variables that need to be viewed, then the result of the ajax call must fail, because the name of the callback function has been changed. It cannot be parsed;

For example, if the printed variable is 333, then the final callback result is: 333ajaxcallbak(1); the client is looking for the function name 333ajaxcallbak and cannot parse it.

2. Use the error function to print error information:

$.ajax() has an error parameter, which can specify a function. This method will be called when the request fails. The information given here is very useful for debugging;

error: function (XMLHttpRequest, textStatus, errorThrown)

The first parameter XMLHttpRequest returned by the error event has some useful information:

XMLHttpRequest.readyState:

The status code returned corresponds to an error description:

Status code

0 - (uninitialized) the send() method has not been called yet

1 - (Loading) The send() method has been called and the request is being sent

2 - (Loading completed) The send() method has been executed and all response content has been received

3 - (Interactive) Parsing response content

4 - (Complete) The response content parsing is completed and can be called on the client

XMLHttpRequest.status:

The status code returned here is the HTTP status we see every day; such as 404, which means the page was not found;

textStatus:

"timeout", "error", "notmodified" and "parsererror".

(Default: automatic judgment (xml or html)) The time to call when the request fails. There are three parameters: XMLHttpRequest object, error message, and (optional) captured error object. If an error occurs, the error message (the second parameter) may be "timeout", "error", "notmodified" and "parsererror" in addition to null.

Through this error function, it is easy to troubleshoot program errors;

For example, in #2 above, removing the comment is equivalent to changing the callback function name; in error, it will report: parsererror;

3. Use console.log to print output: (alert() can also be used)

This is just a auxiliary method to enhance the debugging experience. For tracking variables of interest in js, we can print them out through the alert() method, but frequent pop-up boxes will make people irritated. console.log is an alternative, it is a method of the firebug plugin. The variable results printed by console.log will be displayed in the firebug console panel;

Possible reasons for the error:

1. If the format of the returned result is incorrect, you can see the result in firebug;

2. For JSON requests, the format is strict:

If the error reported through the error function is: parsererror

The possible reason is the problem of server-side script encoding; you can add the corresponding header information to the first line processed in the server-side processing function:

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

Of course, most likely the format is incorrect:

Copy code The code is as follows: echo "{'re':'success'}" ;jquery cannot parse echo "{"re":"success"}"; there will be no error Do not output weird json format strings, otherwise the jq1.4 version will not execute the success callback. For example, {abc:1} or {'abc':1}, to output

copy the code and the code is as follows: {"abc":1} {'success':true} was changed to {"success":true}