带有 jQ​​uery AJAX 的 JSONP 回调函数

Posted 2023-03-03

【中文标题】带有 jQ​​uery AJAX 的 JSONP 回调函数

【英文标题】：Callback function for JSONP with jQuery AJAX

【发布时间】：2011-11-28 15:41:04

【问题描述】：

我不太明白如何处理 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"。

处理这个问题的正确方法是什么？现在我得到了我需要的结果，但我知道这是不对的，这让我很困扰。

【问题讨论】：

我猜 POST 参数被忽略了。据我所知，JSONP 只能发出 GET 请求，因为实际上所做的是在页面的 head 部分创建一个

【参考方案1】：

这就是我对我的所作所为

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

【讨论】：

@vsync，你不能用 jsonp 发帖。请参考***.com/questions/2699277/post-data-to-jsonp

【参考方案2】：

删除这一行：

jsonp: 'jsonp_callback',

或者替换这一行：

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

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

【参考方案3】：

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

【讨论】：

“自动生成的函数只会调用回调”，谢谢！

Abdelfattah Ragab 非常感谢您的解释！