Callback function for JSONP with jQuery AJAX

Question

I didn't quite understand how to work with the callback for the ajax function of jQuery.

I have the following code in the JavaScript:

try {
    $.ajax({
        url: 'http://url.of.my.server/submit?callback=?',
        cache: false,
        type: 'POST',
        data: $("#survey").serialize(),
        dataType: "jsonp",
        timeout: 200,
        crossDomain: true,
        jsonp: 'jsonp_callback',
        success: function (data, status) {
            mySurvey.closePopup();
        },
        error: function (xOptions, textStatus) {
            mySurvey.closePopup();
        }
    });
} catch (err) {
    mySurvey.closePopup();
}

And on the server side (AppEngine / Python) I get the value of the callback parameter and respond with

self.response.headers['Content-Type'] = 'application/json; charset=utf-8'
self.response.out.write(callback + '({"msg": "ok"});')

But then I get an "Error: jQuery152042227689944248825_1317400799214 is not a function" in the browser console.

What is the proper way to handle this? Right now I get the results that I need, but the fact that I know it's not right is bothering me.

I guess the POST parameter is ignored. As I know JSONP can only make GET requests because what actually does is creating a <script> tag in the head section of you page and retrieve the resource as it was a generic js file stored on another server. — Leonardo
– Leonardo, Commented May 6, 2013 at 2:45

Barmar · Accepted Answer · 2019-04-24 04:32:07Z

35

This is what I do on mine

$(document).ready(function() {
  if ($('#userForm').valid()) {
    var formData = $("#userForm").serializeArray();
    $.ajax({
      url: 'http://www.example.com/user/' + $('#Id').val() + '?callback=?',
      type: "GET",
      data: formData,
      dataType: "jsonp",
      jsonpCallback: "localJsonpCallback"
    });
  });

function localJsonpCallback(json) {
  if (!json.Error) {
    $('#resultForm').submit();
  } else {
    $('#loading').hide();
    $('#userForm').show();
    alert(json.Message);
  }
}

edited Apr 24, 2019 at 4:32

Barmar

789k57 gold badges554 silver badges669 bronze badges

answered Sep 30, 2011 at 17:25

atbebtg

4,1139 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tal Over a year ago

@vsync, you cannot do a post with jsonp. Please refer stackoverflow.com/questions/2699277/post-data-to-jsonp

Joe · Accepted Answer · 2011-09-30 17:21:49Z

13

delete this line:

jsonp: 'jsonp_callback',

Or replace this line:

url: 'http://url.of.my.server/submit?callback=json_callback',

because currently you are asking jQuery to create a random callback function name with callback=? and then telling jQuery that you want to use jsonp_callback instead.

answered Sep 30, 2011 at 17:21

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Comments

Abdelfattah Ragab · Accepted Answer · 2015-06-27 09:53:14Z

11

$.ajax({
        url: 'http://url.of.my.server/submit',
        dataType: "jsonp",
        jsonp: 'callback',
        jsonpCallback: 'jsonp_callback'
    });

jsonp is the querystring parameter name that is defined to be acceptable by the server while the jsonpCallback is the javascript function name to be executed at the client.
When you use such url:

url: 'http://url.of.my.server/submit?callback=?'

the question mark ? at the end instructs jQuery to generate a random function while the predfined behavior of the autogenerated function will just invoke the callback -the sucess function in this case- passing the json data as a parameter.

$.ajax({
        url: 'http://url.of.my.server/submit?callback=?',
        success: function (data, status) {
            mySurvey.closePopup();
        },
        error: function (xOptions, textStatus) {
            mySurvey.closePopup();
        }
    });

The same goes here if you are using $.getJSON with ? placeholder it will generate a random function while the predfined behavior of the autogenerated function will just invoke the callback:

$.getJSON('http://url.of.my.server/submit?callback=?',function(data){
//process data here
});

edited Jun 27, 2015 at 9:53

answered Jun 27, 2015 at 9:43

Abdelfattah Ragab

1573 silver badges10 bronze badges

2 Comments

Eddy Over a year ago

"the autogenerated function will just invoke the callback", Thanks!

Sharpey Over a year ago

Abdelfattah Ragab thank you a lot for explaining this!

Collectives™ on Stack Overflow

Callback function for JSONP with jQuery AJAX

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related