CODEWITHSUNDEEP
javascriptjquery
user1542984
user1542984

Reputation:

Why json response not display.?

I a getting undefined value while using ajax.I am using http://validate.jsontest.com/?json={%22key%22:%22value%22} I call like that in this fiddle.

I use post method in that I use only this url http://validate.jsontest.com/ strong text http://jsfiddle.net/3TUvr/

var formData = {"key":"value"}; //Array 

$.ajax({
    url : "http://validate.jsontest.com/",
    type: "POST",
    data : formData,
    success: function(data, textStatus, jqXHR)
    {                      
      alert(data["empty"]+"data");
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
      alert(jqXHR+"jqXHR");
    }
});

Upvotes: 1

Views: 1421

Answers (7)

ugocasalone
ugocasalone

Reputation: 499

The data attribute must be a string with Key/Value pairs(http://api.jquery.com/jquery.ajax/).

So try using: 

var formData = 'json={key:value}';

http://jsfiddle.net/ugocasalone/mfgbdLxo/

Upvotes: 0

Oleksandr
Oleksandr

Reputation: 5668

I had the same issue in angular2,

in my service I had code

   postJSON(){
        var json = JSON.stringify({var1:'test',var2:3});
        var params = 'json=' + json;

        var header =  new Headers();
        header.append('Content-Type','application/x-www-form-urlencoded');

        return this._http.post('http://validate.jsontest.com', params, { headers: header }).map(res=>res.json());
    }

the problem with my code was that I forgot to import Headers.

   import {Headers} from 'angular2/http';

Hope this will be helpful for someone.

Upvotes: 2

gabr
gabr

Reputation: 26830

http://validate.jsontest.com rejects POST requests unless Content-Type is set to application/x-www-form-urlencoded.

Upvotes: 0

Innovation
Innovation

Reputation: 1534

Actually this API will want data in the form url?json= your json

So solution can be:

var formData = {"key":"value"}; //Array 

$.ajax({
    url : "http://validate.jsontest.com/",
    type: "POST",
    data : "json="+formData,
    success: function(data, textStatus, jqXHR)
    {


       alert(data["empty"]+"data");
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
   alert(jqXHR+"jqXHR");
    }
});

Upvotes: 0

Ashik Basheer
Ashik Basheer

Reputation: 1601

I tired your link and the json data is rendered properly,

You probably missed dataType: 'json' that is why you get 'undefined'

Your code should be like this,

var formData = {"key":"value"}; //Array

$.ajax({ url : "http://validate.jsontest.com/",

type: "POST",

data : formData,

dataType : 'json',

success: function(data, textStatus, jqXHR)

{

   alert(data["empty"]+"data");

},

error: function (jqXHR, textStatus, errorThrown)

{

alert(jqXHR+"jqXHR");

}

});

Upvotes: 0

Dhanu Gurung
Dhanu Gurung

Reputation: 8840

Figure out that the url you were passing is wrong:

Correct url : http://validate.jsontest.com/?json={%22key%22:%22value%22}

Updated Js Fiddle Link.

Upvotes: 0

Aashray
Aashray

Reputation: 2763

http://validate.jsontest.com/ does not contain any value other than {"error": "You must pass JSON via the ?json= parameter to validate."}.

If you change data["empty"] to data["error"] you will get the value You must pass JSON via the ?json= parameter to validate.. Your ajax request is retrieving the value in the page.

Upvotes: 0

Related Questions