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'}");

我该如何纠正这个问题？

EDITED

这是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':

您的回复是在JavaScript字符串中进行JSON编码，但您尝试将其视为JavaScript对象。

或者：

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

crossDomain:true,

删除它。它在这里没有做任何事情。（所有这一切都是，当使用XHR（您没有使用）到相同的原点（您没有定位）时，请禁止通常不允许使用的自定义标题原始请求，以便您可以执行HTTP重定向到不同的源。）

cache: false,

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

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

如果要停止click事件，则需要从click事件处理函数（而不是Ajax成功处理函数）返回false。

您不能等到Ajax函数运行并在执行此操作之前得到响应。 Ajax is asynchronous。

如何使用JSONP来回调函数？

1 个答案: