使用JQuery ajax的JSONP的回调函数

时间:2011-09-30 17:16:52

标签: javascript jquery ajax jsonp

我不太明白如何使用JQuery的ajax函数的回调。

我在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();
    }

在服务器端(AppEngine / Python),我得到了回调参数的值并用

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

但是我在浏览器上得到"Error: jQuery152042227689944248825_1317400799214 is not a function"

处理此问题的正确方法是什么?现在我得到了我需要的结果,但事实上我知道这是不对的困扰我。

3 个答案:

答案 0 :(得分:30)

这就是我在我身上做的事情

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

答案 1 :(得分:13)

删除此行:

jsonp: 'jsonp_callback',

或替换此行:

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

因为目前你要求jQuery用callback=?创建一个随机回调函数名,然后告诉jQuery你要使用jsonp_callback

答案 2 :(得分:9)

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

jsonp 是定义为服务器可接受的查询字符串参数名称,而 jsonpCallback 是要在客户端执行的javascript函数名称。
当你使用这样的网址时:

url: 'http://url.of.my.server/submit?callback=?'
问号?最后指示jQuery生成随机函数,而自动生成函数的预定义行为将仅调用回调 - 在这种情况下的成功函数 - 将json数据作为参数传递。

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


如果你使用$ .getJSON,那么同样如此?占位符它会生成一个随机函数,而自动生成函数的预定义行为只会调用回调:

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