CODEWITHSUNDEEP
jqueryajaxpost
Mads610
Mads610

Reputation: 129

jQuery Ajax POST unsuccessful

I'm unable to successfully post using jquery's ajax functionality.

URL of the running page is http://localhost:9999, URL of the target (web service) is http://localhost:8080. No the ports aren't the same, they are 9999 and 8080 respectively.

Below is the request and jquery ajax code.

Request:

OPTIONS /profile/set_member HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
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: 115
Connection: keep-alive
Origin: http://localhost:9999
Access-Control-Request-Method: POST

jQuery ajax code:

$.ajax({ 
        type: "POST", url: "http://localhost:8080/profile/set_member", 
        contentType: "application/json", data: member, 
        error: function(){ alert('Update failed!'); }, 
        processData: false, 
        success: function(){ alert('Update successful!'); }
});

Upvotes: 5

Views: 14493

Answers (3)

BrunoLM
BrunoLM

Reputation: 100381

Make a proxy on the same domain you are calling the ajax, e.g. in PHP:

<?php /* get.php */
    $url = $_GET["Url"];
    echo file_get_contents($url);
?>

Make your ajax call:

$.ajax({ url: "get.php?Url=realurl.com" });

That's one workaround.

Upvotes: 4

Dusda
Dusda

Reputation: 3368

This is an issue with cross-domain ajax calls. Basically (at least in Firefox), a POST request is converted to an OPTIONS request for security reasons. I ran into the same exact thing last night, posted here.

WCF Ajax Call not working with Jquery $.ajax

I had an $.ajax call I was making on localhost:23485, to a web service on http://localhost hosted in IIS. Because they are different domains, cross-domain kicked in and made things difficult.

Upvotes: 6

Vivin Paliath
Vivin Paliath

Reputation: 95588

What handler gets called? The success or error handler? Can you elaborate what "doesn't work" means?

You probably want alert more information in your error handler, like so:

error: function(XMLHttpRequest, textStatus, errorThrown) {
   //console.log is better at least for debugging. You can change this back to alert 
   //when your code goes into production
   console.log("Update unsuccessful. Status: ", textStatus, " error thrown: ", errorThrown);
}

textStatus should give you an idea as to what the problem could be. Possible values are "timeout", "error", "notmodified" and "parsererror". Once you figure out the actual error, please update the question.

Also if you have Firebug check the Net tab to see the request and the response. A few common sources of errors:

  • Violating same-origin policy. You cannot make an AJAX to a different URL from the parent page.
  • Server-side errors. If your server returns something like a 500 response code, the request will fail.
  • Parsing errors. If you're expecting a specific response format like json or xml, and if the response is not in that format, the AJAX request will be unsuccessful.

Upvotes: 0

Related Questions