Webservice POST through JQuery not working

Question

I have a restful webservice and i am trying to make a HTTP POST request via a jquery call through my web pages.

<html>
<head>
<script type="text/javascript" src="js/newjavascript.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jqueryui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">       </script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"> </script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<input type="text" name="name" value="" id="name"/>
<input type="submit" value="submit" onclick="intialize()"/>
<script>
function formToJSON() {
  return JSON.stringify({"name": $('#name').val() });
 }
  </script>

  <script>
   function intialize(){
   $.ajax({
   type: 'POST',
   contentType: 'application/json',
   url: "http://localhost:41191/test/resources/storeincompleteform",
   dataType: "json",
   data: formToJSON(),
   success: function(data, textStatus, jqXHR){
        alert(' success');

    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('error: ' + textStatus);
    }
  });

      }
  </script>
  </body>
  </html>

But the above code is not working.The webservice is working properly

Also.. why are you importing jQuery twice? 1.5 and 1.7?.. and always load jQuery before dependent .js files — wirey00, Sep 27 '12 at 15:08
What do you mean by not working - is it gives you an error, or nothing happens? — Bud Damyanov, Sep 27 '12 at 15:08
My guess is you've never heard of the [Same Origin Policy](https://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests) — user2428118, Sep 27 '12 at 15:14

score 0 · Answer 1 · edited May 23 '17 at 12:27

Your script is posting to a different port. This conflicts with the browser's Same Origin Policy.

If you're trying to retrieve data from a server, you can use jQuery's built-in JSONP technology in combination with some server-side scripting to circumvent this.

However, since in your case you're trying to post data to a server, you have two options:

Ensure the XMLHttpRequest is same-orgin
Make use of the cross-domain XMLHttpRequest technology available in modern browsers; in that case, you'll have to configure your server to serve Access-Control-Allow-Origin headers that permit the site you're posting from.

score 0 · Answer 2 · answered Sep 27 '12 at 15:19

0

This is an XSS issue, potentially due to the different ports. Change:

dataType: "json"

to:

dataType: "jsonp"

answered Sep 27 '12 at 15:19

Chris Dixon

9,147
5
36
68

Webservice POST through JQuery not working

2 Answers2