How to call ajax request with JSON response using jQuery?

Question

I cannot print success from the below code with the line jQuery.support.cors = true;. Including the line jQuery.support.cors = true; will give a warning message. So how can I avoid that without losing the functionality? My main objective is to call a rest web service that returns JSON data and I have to utilize the JSON data. Please help me with how I can achieve this. Please provide a working sample

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<script>
    jQuery.support.cors = true;
    $.ajax ({
        url: 'http://json-cricket.appspot.com/score.json',
        datatype: "json",
        success: function (e) {
            // Success callback
            alert("sucess");
        }})
</script>
 
</body>
</html>

I think the option is dataType and not all lowercase but not sure how much of a difference that makes, if jquery can handle it or not, can't remember. api.jquery.com/jQuery.ajax — martincarlin87
– martincarlin87, Commented Sep 24, 2013 at 11:51
"will give a warning message" Which message? Cross domain issue? — A. Wolff
– A. Wolff, Commented Sep 24, 2013 at 11:52
I assume this is a crossdomain ajax request? stackoverflow.com/questions/11736431/… Try jsonp — cernunnos
– cernunnos, Commented Sep 24, 2013 at 11:52

Community · Accepted Answer · 2017-05-23 11:53:50Z

You might missed to add type //GET or POST, which type of REST OPEATION
dataType is mispelled
Missed to add contentType

 $.ajax({
            type: "POST", //rest Type
            dataType: 'jsonp', //mispelled
            url: "http://json-cricket.appspot.com/score.json",
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                console.log(msg);                
            }
 });

Updates: While trying to figure out the reason, I think this is the best answer to understand the problem.

Say you're on domain abc.com, and you want to make a request to domain xyz.com. To do so, you need to cross domain boundaries, a no-no in most of browserland.

The one item that bypasses this limitation is tags. When you use a script tag, the domain limitation is ignored, but under normal circumstances, you can't really DO anything with the results, the script just gets evaluated.

Enter JSONP. When you make your request to a server that is JSONP enabled, you pass a special parameter that tells the server a little bit about your page. That way, the server is able to nicely wrap up its response in a way that your page can handle.

Maxim Manco · Accepted Answer · 2013-09-24 12:07:45Z

3

The best shot will be using a jsonp request. For this just specify dataType to be jsonp

$.ajax({
    url: 'http://json-cricket.appspot.com/score.json',
    dataType: 'jsonp',
    success: function (data) {
        console.log(data);        
    }
});

See example on jsFidle

answered Sep 24, 2013 at 12:07

Maxim Manco

1,9441 gold badge12 silver badges19 bronze badges

1 Comment

Shankar Narayana Damodaran Over a year ago

Voted up for fiddle :)

Gurpreet Singh · Accepted Answer · 2013-09-24 12:00:41Z

0

CORS (Cross-Origin Resource Sharing) isn't the same as XSS.

$.support.cors contains the result of a test that tests whether or not the current browser supports cors. changing it doesn't make the browser support cors.

Also, your server has to support CORS by returning the proper headers.

answered Sep 24, 2013 at 12:00

Gurpreet Singh

21.3k5 gold badges47 silver badges62 bronze badges

Comments

Suganth G · Accepted Answer · 2014-08-05 05:33:39Z

Try this , it gives best results. This was used in REST Architecture, the response speed is very high

function CallService(sucessData) {
    $.ajax({
        // Add code for Cross Domain
        headers: getHeaders(),
        type: varType, //GET or POST or PUT or DELETE verb
        url: varUrl, // Location of the service
        data: varData, //Data sent to server
        contentType: varContentType, // content type sent to server
        dataType: varDataType, //Expected data format from server
        processdata: varProcessData, //True or False
        crossDomain: true,
        timeout: 200000,
        success: sucessData,
        error: function (xhr) {// When Service call fails
            alert("Error: " + xhr.responseText);
        }
    });
}

Gurminder Singh · Accepted Answer · 2013-09-24 11:58:35Z

-1

If you are requesting Cross-Domain service, then you need to include jQuery.support.cors = true;. And the correct AJAX code would be:

 $.ajax ({
    url: 'http://json-cricket.appspot.com/score.json',
    dataType: "json",
    contentType: "application/json",
    success: function (jsonData) {
        // Success callback
        alert("sucess");
    },
    error: function() {
        //any error to be handled
    }
 });

answered Sep 24, 2013 at 11:58

Gurminder Singh

1,75516 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to call ajax request with JSON response using jQuery?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related