jquery uses the Firefox firebug plugin to debug Ajax steps to explain _jquery

First, we use an example to illustrate the Ajax invocation process of jquery,

The realization of a function is: Click to confirm the payment button, to achieve balance payment function:

1. First, on the PHP page, bind the function you want to call to the button:

Copy Code code as follows:

<input type= "Submit" Name= "pay_btn" id= "pay_btn" value= "Confirm payment"/>

<script type= "Text/javascript" >

$ (function () {

$ ("#pay_btn"). Bind ("click", Abc.balancepay);

});

2. Script Office:

If you are using the $.post method:

Copy Code code 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 (' Here is printed through console '); #4

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

});

}

The $.post method can also specify callback functions directly:

Copy Code code as follows:

var jqxhr = $.post (URL, data, function (data) {

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

}, ' Jsonp ');

Implemented using the $.ajax method:

Copy Code code as follows:

var jqxhr = $.post (URL, data, function (data) {

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

}, ' Jsonp ');

Implemented using the $.ajax method:

Copy Code code 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这个error函数调试时非常有用, if parsing is incorrect, the error box will pop up
alert (xmlhttprequest.status);
alert (xmlhttprequest.readystate);
alert (textstatus); Paser error;
},

});

3. Server-side:

Copy Code code as follows:

Public Function Actioninterpayproc ($callback)

{

Header ("Content-type:text/javascript");

Header (' content-type:text/html; charset=utf-8′);

$code = $_post[' code '];

$code//#1 Here is an expression with a syntax error.

Echo $code; #2 here for the following debugging instructions;

...

$result = 1;

Echo $_post[' callback ']. ' (' Json_encode ($result). ‘);';/ /Note that the encoding used should be consistent with the client request;

Exit (0);

}

Debugging Tools

Firefox has powerful Firebug Plug-ins, now newer browsers such as Chrome and Safari, as well as IE 8 built-in debugging tools, with the help of these debugging tools, can be very detailed view of Ajax The execution process (the shortcut key for the Debug tool in Chrome and Firefox is Ctrl+shift+c);
The following use of Firebug;

1. Use Firebug to view callbacks:

For Ajax methods, is a server-side program that executes asynchronously, and if the server-side error is not displayed on the page, we need to use the Debugging tools to view it; For example, remove the comments in the above example, and trigger the AJAX request once, and you can see the wrong return results in the console panel:

If the server-side program is wrong, you can see directly, the reason for the error is the same as ordinary pages, but only in the Ajax returned panel view (no display in the Web browser page).
The point here is that if you use the Echo method on the server side to print out the variables that need to be viewed, the result of the AJAX call must be a failure, because the name of the callback function appears to have been changed, resulting in unresolved;

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

2. Print error message using the error function:

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

Error:function (XMLHttpRequest, Textstatus, Errorthrown)

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

Xmlhttprequest.readystate:

The status code returned by it corresponds to an error description:

Status code

0-(uninitialized) the Send () method has not been called

1-(load) called Send () method, sending request

2-(load complete) Send () method completed, received all response content

3-(interactive) parsing response content

4-(complete) The response content resolution is complete and can be invoked on the client

Xmlhttprequest.status:

The status code returned here is the HTTP status we see daily, like 404, which means that no page has been found;

Textstatus:

"Timeout", "error", "Notmodified" and "ParserError".

(Default: Automatic judgment (XML or HTML)) when a request fails to call time. The parameter has the following three: XMLHttpRequest object, error message, optionally caught error object. If an error occurs, the error message (the second argument) may be "timeout", "error", "Notmodified", and "ParserError" in addition to being null.

Through this error function, the program error is easy to troubleshoot;

For example, the above in the corner, remove the annotation, the equivalent of changing the callback function name; In the Erro will report: ParserError;

3. Use Console.log to print output: (Alert () also can)

This is just an auxiliary way to enhance the debugging experience. For the attention variable tracking in JS, we can print out the alert () method, but the pop-up box is often annoying. Console.log is an alternative, and it is a way of Firebug plug-ins. The results of Console.log printed variables are displayed in the console panel of the Firebug;

Possible causes of error:

1. If the returned result is malformed, the result can be seen in the Firebug;

2. For JSON requests, the format is more stringent:

If the error function is typed, the error is: ParserError

Possible causes are problems with server-side script encoding, the first line that can be processed within the service-side processing function plus the corresponding header information:

Eg:header (' content-type:text/html; Charset=utf-8 ');

Of course, it is most likely that the format is incorrect:

Copy Code code as follows:

echo "{' re ': ' Success '}"; jquery cannot parse
echo "{\" re\ ": \" Success\ "}"; there is no error

Do not output weird JSON-formatted strings, or jq1.4+ versions do not perform success callbacks. such as {abc:1} or {' abc ': 1}, to output

Copy Code code as follows:

{"abc": 1}

{' Success ': true} to {' Success ': true}