javascript - How to call json object from AJAX?

Question

Here is my script:

$.ajax({ 
    type: "Get", 
    url: "Sample.js",
    datatype: 'json', 
    data: JSON.stringify({ key:key }), 
    success: function (data) { 
        var sample = data.name; 
        $("#html").html(sample); 
    }, 
    error: function () {
        alert("Error"); 
    }
});

This is my Sample.js file:

{ "name": "user" }

When I run this code I get a blank screen. This is my script using getJSON():

$.getJSON("Sample.js", function (data) { 
    var sample = data.name; 
    $("#html").html(sample); 
})

This produces "user" perfectly. What is the problem with $.ajax code?

Answer 1

As the jQuery documentation states:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

Try modifying the dataType param.

Answer 2

In the getJSON version your don't send any data. Could this be the reason why that works? To me it looks like this could be sth. on the server side that delivers an empty JSON object when you pass the key parameter.

Answer 3

change your datatype to dataType. Its case sensitive. Refer http://api.jquery.com/jQuery.getJSON/

Remove JSON.Stringify and change Get to GET

$.ajax(
   { type: "GET", 
     url: "Sample.js", 
     dataType: "json",
     data: {key:key }, 
     success: function (data) 
      { var sample = data.name; $("#html").html(sample); }, 
     error: function () { alert("Error"); }}
);