I didn't quite understand how to work with the callback for the ajax funcion 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" on the browser.

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 May 6 '13 at 2:45
up vote 30 down vote accepted

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);
        }
    }
$.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 7 '17 at 4:22

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.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.