How do I debug jquery AJAX calls?

Question

I have been working on trying to get AJAX to work with Jquery. My big issue so far has been that I don\'t really know how to figure out where I\'m making a mistake. I don\'t

Answer 1

if you are using mozilla firefox than just install an add-on called firebug.

In your page press f12 in mozilla and firebug will open.

go for the net tab in firebug and in this tab go in the xhr tab. and reload your page. you will get 5 options in xhr Params Headers Response HTML and Cookies

so by going in response and html you can see which response you are getting after your ajax call.

Please let me know if you have any issue.

Answer 2

you can use success function, once see this jquery.ajax settings

 $('#ChangePermission').click(function(){
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
        'user': document.GetElementById("user").value,
        'perm': document.GetElementById("perm").value
        }
       success:function(result)//we got the response
       {
        //you can try to write alert(result) to see what is the response,this result variable will contains what you prints in the php page
       }
    })
})

we can also have error() function

hope this helps you

Answer 3

2020 answer with Chrome dev tools

To debug any XHR request:

1. Open Chrome DEV tools (F12)
2. Right-click your Ajax url in the console

for a GET request:

• click Open in new tab

for a POST request:

1. click Reveal in Network panel

2. In the Network panel:

   1. click on your request

   2. click on the response tab to see the details

Answer 4

Install Firebig to see where your error is happening. You could also set up a callback in your ajax call to return your error messages from your PHP. Eg.

error: function(e){
     alert(e);
     }