JQuery AJAX doesn't get to success call back function

Question

Here is my jQuery Ajax code

$(document).ready(function() {

          $("#submitService").click(function(){  
              alert("Before ajax");
            $.ajax({
               type: "GET",
               url: "http://api.openweathermap.org/data/2.5/weather?q=London,uk",
               headers: {"accept": "application/json"},
             success: function (dataItem) {
                alert("Success..");
            },
             complete: function (dataItem) {
                alert("Completed");
            },
              error: function (dataItem) {
                 alert("Error in making engine call."+dataItem);
              }
             });
             alert("After ajax");

            });                 //click()
      });

When my button is clicked it enters to [complete] and [error] call back methods but NOT to "success" call back method. How can I see what the error is?

I tried to curl the same statement and I get a valid response:

curl "http://api.openweathermap.org/data/2.5/weather?q=London,uk" -H "accept: application/json"

I'm using jQuery 1.7.2

<script type="text/javascript" src='<spring:url value="/resources/jquery/js/jquery-1.7.2.min.js"/>'></script>

In FireBug it shows that request with 200 OK, but no response body. But I see response body when I do it via curl.

What could be the issue? Thanks

Answer 1

I guess, it is URL encode problem. Replace comma , with encode %2C

url: "http://api.openweathermap.org/data/2.5/weather?q=London%2Cuk"

Answer 2

Cancel the click event

$("#submitService").click(function(e){  
    e.preventDeault();
    ...

and let jQuery do the proper encoding of the URL

type: "GET",
url: "http://api.openweathermap.org/data/2.5/weather",
data: {q : "London,uk" },

and hopefully the service and your browser both support CORS since this is a Same Origin Policy issue.

Answer 3

Did you notice there are no Allow-Access-Origin in Api call?

I got this on chrome

XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/weather?q=London,uk . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://jquery.com ' is therefore not allowed access.

I think you have a cross site scripting issue.

Answer 4

将application / json更改为application / x-www-form-urlencoded