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 — Leonardo, May 06 '13 at 02:45

score 35 · Accepted Answer · edited Apr 24 '19 at 04:32

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 '19 at 04:32

Barmar

741,623
53
500
612

answered Sep 30 '11 at 17:25

atbebtg

4,023
9
37
49

@vsync, you cannot do a post with jsonp. Please refer https://stackoverflow.com/questions/2699277/post-data-to-jsonp – Tal Nov 01 '17 at 13:25

score 13 · Answer 2 · answered Sep 30 '11 at 17:21

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.

Abdelfattah Ragab · Answer 3 · 2015-06-27T09:53:14.497

$.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
});

"the autogenerated function will just invoke the callback", Thanks! — Eddy, Jun 07 '17 at 04:22

Callback function for JSONP with jQuery AJAX

3 Answers3

Linked