jQuery ajax POST causes an immediate GET to the same URL

I'm using jQuery (1.4.2) with a Django backend and doing my development with Firefox (3.5.15) on Debian. I'm using $.ajax() to post some data to my server, which reflects the data back to the browser. Firefox is sending the POST, then immediately performing a GET on the same URL. Where is this GET coming from? I don't want it to happen.

The code I'm using to POST looks like this:

$.ajax({
    type: 'POST',
    url: '/edit_value/',
    data: JSON.stringify(data_to_post),
    success: function(updated) {
        alert('success');
    },
    error: function(request, description, exception) {
        alert('error');
    },
    async: false,
    dataType: 'json'
});

I see the success alert message and not the error alert message. Looking at my server logs, I am echoing back data_to_post correctly.

I've watched tcpdump and see the POST request. It looks exactly开发者_如何学C as I would expect:

POST /edit_value/ HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.15) Gecko/20101028 Iceweasel/3.5.15 (like Firefox/3.5.15)
Accept: application/json, text/javascript, */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost:8000/
Content-Length: 30
Cookie: csrftoken=9e3edd79a51956f088f4a505ca1b4282; sessionid=80d72430f4682632ccfb8dc8047b7d17
Pragma: no-cache
Cache-Control: no-cache

[{"id":"161","value":"988.0"}]

The response looks normal too:

HTTP/1.0 200 OK
Date: Mon, 22 Nov 2010 07:28:44 GMT
Server: WSGIServer/0.1 Python/2.6.6
Vary: Cookie
Content-Type: text/json

[{"id":"161","value":"988.0"}]

If async is set to true, sometimes the browser will hang-up the TCP connection early, sometimes the request/response completes. By setting async to false, the request/response always completes (it was set to false for the above example). Firefox then immediately sends a GET.

GET /edit_value/ HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.15) Gecko/20101028 Iceweasel/3.5.15 (like Firefox/3.5.15)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://localhost:8000/
Cookie: csrftoken=9e3edd79a51956f088f4a505ca1b4282; sessionid=80d72430f4682632ccfb8dc8047b7d17

Where does this GET come from? How can I trap it in Firebug before the page reloads? What other information can I provide?

Thanks, Craig

I had a similar problem when I was making an Ajax request for values within a <form> tag.

My problem arose because I had an action on that form (e.g. <form action="mypage.aspx"...) that - even though the Ajax POST was succeeding - was causing the form to be submitted.

If this is the same as your situation, try either removing the action declaration in your form tag or including a return false; statement on your Ajax request.

Instead of returning false, using e.PreventDefault does exactly what is required. In this case, the default action of the hyperlink was to redirect hence causing a get. Using the e.preventDefault() statement will do the trick.(NOTE:e is the event object that is passed as a parameter to the function)

You need to include return false; statement in your Ajax request as Phil told you.

I just want to suggest a good application that might help you in Ajax debugging:

Selenium web site