CODEWITHSUNDEEP
javascriptjqueryjsonp
Abhishek J
Abhishek J

Reputation: 191

Unable to read data from AJAX (dataType:"jsonp") call to web service

I am using ajax call's to perform POST and GET operations from a WebService hosted on some server.

I am using dataType:"jsonp" due to the cross domain issue.I can see the data being sent by the web service on fiddler. I want to access the data which I get from the service and I dont know how do do that.

This is my ajax call:

    $.ajax({
        type: method,
        url: "url",
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",
        jsonp: false,
        jsonpcallback:function(data){},            //What am I supposed to write here so that I can get the JSON data from Padded json
        success: successHandler,
        error: errorHandler
    });

This is the approximation of the json response that I receive from the service:

    {"Ideas":[
               {"Message":null,"IdeaId":1},
               {"Message":null,"IdeaId":1}
             ]
    }

Any kind of help will be greatly appreciated. I searched through a lot of posts but could not get through.

Thank you in advance.

Upvotes: 0

Views: 2119

Answers (4)

tonino.j
tonino.j

Reputation: 3871

You need to use your console. E.g. firebug if you use firefox, or chrome's development console.

There you should see mistakes in your code.

ajax()

function in jquery takes success: function(data){ // do something with the data } callback.

console.log(//some data)

is for logging various data at different points in your script.

So 

$.ajax({
    type: method,
    url: "url",
    dataType: "jsonp",
    success: function(data){
    console.log(data);
}

});

Is not such a bad idea.

Upvotes: 0

David
David

Reputation: 3418

I got this up and running this way:

<script type="text/javascript">

  var jsonpCallback;

  function checkDocId() {
    // AJAX request
    $.ajaxSetup({ cache: false });

    jsonpCallback = function(data) {
      $("#result").html(data.html);
    };

    $.ajax({
      type: "GET",
      url: "/secudok/ws/rest/checkdocid/jsonp/" + encodeURIComponent($("#docId").val()),
      dataType: "jsonp",
      jsonpCallback: "jsonpCallback",
      crossDomain: true
    });
  }

</script>

The server returs the data wrapped into the callback function: function({JSON}).

jsonpCallback({"html":"<table>data</table>\n"})

In my example we use HTML, but could be JSON as well

yourCallbackName({"a":"1"; "b":"2"})

Upvotes: 0

Quentin
Quentin

Reputation: 943649

jsonpcallback:function(data){}, //What am I supposed to write here so that I can get the JSON data from Padded json

Usually, nothing. You only need to specify the callback if your JSONP service is really atypical. If you do specify it, it needs to be a string.

Likewise you shouldn't set jsonp: false as that will prevent the callback parameter being generated.

You do need a success handler to handle the data though. Having an error handler is also a good idea.

function successHandler(data) {
    console.log(data)
}

function errorHandler(jqXHR, errorType, exception) {
    console.log(errorType, exception);
}

$.ajax({
    url: "url", // Make this the real URL!
    dataType: "jsonp",
    success: successHandler,
    error: errorHandler
});

Then the JSONP handler needs to actually return JSONP

The Content-Type header returned by the server should be application/javascript

The body should be:

  • The value of the callback key in the query string
  • (
  • Some JSON
  • );

e.g.

jqueryCallback123u54yiyioeuioey8({ "foo": "bar" });

Upvotes: 1

Anton Egorov
Anton Egorov

Reputation: 1372

I'm not a great scripter, but I used AJAX's for my project.. Try this out, it's how it worked for me. 

$.ajax({
    type: method,
    url: "url",
    dataType: "jsonp",
    success: function(data){
        console.log(data);
    }
});

Upvotes: 0

Related Questions