如何调试JSONP AJAX事件

Question

I'm trying to get a JSONP AJAX request to go through, but I'm having problems figuring out why it's not working. Right now I have this call

$.getJSON(server_path+"formproxy.php?"+$(form).serialize()+"&action="+form.action+"&callback=?", function(data, status, xhr) {
    alert(data);
});

but when I run the script nothing seems to happen. The best I can figure is that the jsonp request is running into an error, but because it's a jsonp request it's not actually reporting the error, which is greatly hindering my debugging.

I've played around with

$.ajaxSetup({
    "error":function() {
        alert("error");
    }
});

and

$(document).ajaxError(function(e, xhr, settings, exception) {
    alert('failed');
});

but I can't get either of them to trigger.

I've output the target url to the console, namely

server_path+"formproxy.php?"+$(form).serialize()+"&action="+form.action+"&callback=?"

I can visit the outputted url and see that it is working and outputs ?({"result":"success"}) which seems right to me.

Looking at the console in Chrome, it doesn't even show the XHR, but I'm at least sure the $.getJSON() code is being reached thanks to breakpoints.

I should finally note that I'm not even concerned with getting data back from the AJAX call. I just need to send form data cross domain and let the formproxy.php script process it.

Any thoughts on why this may not be working or techniques to help me see what's happening inside would be much appreciated.

Answer 1

Have you tried looking at the Network Panel in Chrome developer tools? It will show you all the http requests/responses that are being made on your page. That way you can tell for sure whether the the getJSON call is making a request to the server, and what the server response is (if any).

You can also use the Net panel in Firebug for this.