Jquery USES the Firefox FireBug plug in to debug Ajax steps

First, let's use an example to illustrate the Ajax invocation of JQuery.

One of the functions implemented is: after clicking the "confirm payment" button, the function of balance payment can be realized:

1. First bind the function that needs to be called to the button on the PHP page:

<input type="submit" name="pay_btn" id="pay_btn" value=" Confirm the payment " />
<script type="text/javascript">
$(function(){
    $("#pay_btn").bind("click",ABC.balancePay);
});

2. Script:

If using the $.post method:

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 through console printout '); //#4
                $("#msg").text( 'the results :'+data);
});
}

$. Post can also specify the callback function directly:

var jqXhr = $.post(url, data, function(data){
            $("#msg").text(' The results of :'+data);
}, 'jsonp');

Using the $.ajax method:

var jqXhr = $.post(url, data, function(data){
            $("#msg").text( 'the results :'+data);
},  ' jsonp');

Using the $.ajax method:

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 not correct, the error box will pop up
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus); // paser error;
                    },
});

3. Server-side:

public function actionInterPayProc($callback)
{
//header("content-type: text/javascript");
//header( ' Content-type: text/html; charset=utf-8 ' );
         $code = $_POST['code'];
        //$code  //#1  An expression with syntax errors is given here 
        //echo $code;  //#2   Marked here for later debugging instructions; 
         ... 
        $result = 1;
            //echo $_POST['callback'].  ' ( '  . json_encode($result) .  ' );';// Note that the encoding used should be consistent with the client request. 
exit(0);
}

A debugging tool

Firefox has a powerful FireBug plugin, and newer browsers such as Chrome and Safari, as well as IE 8, have built-in debugging tools. With these debugging tools, you can see the execution process of Ajax in great detail (the shortcut key to bring up debugging tools in Chrome and Firefox is CTRL +shift+c).
Use FireBug below;

1. Use firebug to view callbacks:

For the Ajax method, it is a server-side program that is executed asynchronously. If something goes wrong on the server side, it will not be displayed on the page. For example, by removing the #2 comment from the above example and triggering the ajax request once, you can see the error return result in the console panel:
< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201312/20131202095036.jpg? 201311295115 ">  

If a server-side program fails, you can also see that the cause of the error is the same as a normal page, but is viewed in a panel returned by ajax (there is no display in the web browser page).
It is important to note that if you print out the variables you need to view on the server using methods such as echo, then the result of the ajax call must fail because the name of the callback function appears to have been changed so that it cannot be resolved.

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

2. Use the error function to print the error message:

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

Error: function (XMLHttpRequest, textStatus, errorThrown)

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

XMLHttpRequest. ReadyState:

The returned status code corresponds to an error description:

Status code

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

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

2 - (load completed) the send() method has completed and received the full response

3 - (interaction) parsing the response content

4 - (complete) the response content is parsed and ready to be invoked on the client side

XMLHttpRequest. Status:

The status code returned here is the HTTP status that we see every day; For example, 404 means the page was not found.

TextStatus:

"Timeout ", "error", "notmodified", and "parsererror".

(default: automatically determines (XML or HTML)) when the request fails. There are three parameters: the XMLHttpRequest object, the error message, and (optionally) the error object to be caught. If an error occurs, the error message (second parameter) may be "timeout", "error", "notmodified", and "parsererror" in addition to getting null.

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

For example, at #2 above, removing the comment changes the name of the callback function. In erro: parsererror;

3. Use console.log to print out :(alert() is also available)

This is just an auxiliary way to enhance the debugging experience. For the focus variable trace in js, we can print it out using the alert() method, but the frequent pop-ups can be annoying. Console.log is an alternative, a method of the firebug plug-in. The output of the console. Log variable is displayed in the firebug console panel.

Possible reasons for error:

1. If the result format is not correct, you can see the result in firebug.

2. For JSON request, the format is strict:

If the error function is typed out the error is: parsererror

The possible cause is a problem with server-side script coding; You can add the corresponding header information to the first line processed in the server-side processing function:

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

Most likely, of course, the format is incorrect:

echo "{'re':'success'}";jquery Can't parse 
echo "{"re":"success"}"; There are no errors 

Do not output weird json-formatted strings, or the jq1.4+ version will not perform a success callback. If {ABC :1} or {' ABC ':1}, output

{"abc":1}
{'success':true} Instead of {"success":true}