如何配合JSONP回调函数？

Question

我正在尝试使用 JSONP 回调与服务器通信。

这是我的代码

$('.icwsDownloadRecording').click(function(){
    var id = $(this).attr('data-recordingid');

    $.ajax({    
        type: 'GET',
        url: 'http://example.com/Default2.aspx',        
        data: {'ID': id},
        dataType: 'jsonp',
        cache: false,
        timeout: 40000,
        crossDomain:true,
        jsonp: "MyCallbackFunction",
    }); 

});


function MyCallbackFunction(data)
{
  //process data further
  console.log(data);

    if(!data || data.url.length < 5){
        return;
    }

    var $preparingFileModal = $("#preparing-file-modal");

    $preparingFileModal.dialog({ modal: true });

    $.fileDownload( data.url, {
        successCallback: function (url) {

            $preparingFileModal.dialog('close');
        },
        failCallback: function (responseHtml, url) {

            $preparingFileModal.dialog('close');
            $("#error-modal").dialog({ modal: true });
        }
    });

    return false; //this is critical to stop the click event which will trigger a normal file download!

}

这里的问题是我不断在控制台中收到此消息

ReferenceError: MyCallbackFunction is not defined

正如您在我上面的代码中看到的那样，我确实定义了这个

服务器响应如下所示

MyCallbackFunction("{'URL': 'http:\/\/example.com:8106\/ghjgj3835396265336634646562363030303122226D616C686179656B22535353557DBE0C305645E2DE110AA1D7F8792E96A3'}");

我该如何解决这个问题？

已编辑

这是我在 Quentin Answer 之后的代码，这是我的新代码

$(function(){

    $('.icwsDownloadRecording').click(function(){
        var id = $(this).attr('data-recordingid');

        $.ajax({    
            type: 'GET',
            url: 'http://example.com/Default2.aspx',        
            data: {'ID': id},
            dataType: 'jsonp',
            timeout: 40000,
            success: function(data){

                 //process data further
                console.log(data);

                if(!data || data.url.length < 5){
                    return;
                }

                var $preparingFileModal = $("#preparing-file-modal");

                $preparingFileModal.dialog({ modal: true });

                $.fileDownload( data.url, {
                    successCallback: function (url) {

                        $preparingFileModal.dialog('close');
                    },
                    failCallback: function (responseHtml, url) {

                        $preparingFileModal.dialog('close');
                        $("#error-modal").dialog({ modal: true });
                    }
                });

                return false; //this is critical to stop the click event which will trigger a normal file download!
            }
        }); 

    });
});

Answer 1

除非您将所有代码都封装在另一个函数中，否则应该可以。

不过使用硬编码的函数名是不好的做法。

更新:

$(function(){

您确实将所有代码封装在另一个函数中。

删除这个：

jsonp: "MyCallbackFunction",

替换为：

success: MyCallbackFunction

或者您可以在那里放置一个匿名函数表达式（就像您在编辑中所做的那样）

让 jQuery 生成一个唯一的函数名称（它可以保护您免受竞争条件的影响）并允许服务器使用 callback 查询字符串参数来确定要使用的函数名称。

MyCallbackFunction 与 ajax 调用在同一作用域内，因此函数可以使用它（可以将其复制到适当命名的全局）。

修复该问题后，您还有一个问题：

MyCallbackFunction("{'URL':

您的响应是 JSON 编码在 JavaScript 字符串中，但您试图将其视为 JavaScript object.

或者：

修复服务器，使其不会将 JSON 或
运行第一个参数通过 JSON.parse

crossDomain:true,

删除它。它在这里什么都不做。（它所做的只是，当使用 XHR（你没有使用）到同一个来源（你没有定位）时，抑制 [=70= 通常不允许的自定义 headers ] 请求，以便您可以执行到不同来源的 HTTP 重定向）。

cache: false,

这是 JSONP 请求的默认值。包括它是没有意义的。

return false; //this is critical to stop the click event which will trigger a normal file download!

如果你想停止点击事件，那么你需要从点击事件处理函数（而不是 Ajax 成功处理函数）return false。

您不能等到 Ajax 函数有运行并得到响应后再执行此操作。 Ajax is asynchronous。

如何配合JSONP回调函数？

How to work with JSONP to call back the function?

javascript

jquery

jsonp

callback