Question

如果我必须利用jQuery AJAX API的细节并为每个ajax调用设置我自己的自定义设置，我的应用程序如下所示：

假设我有一个页面，通过对某些API进行ajax调用来显示表中的员工信息。

define(["jQuery"], function($) {
    var infoTable = function (options) {

        function init() {
            // Provide success callback
            options.success_callback = "renderData";
            getData();
        }

        function renderData() {
            // This callback function won't be called as it is not 
            // in global scope and instead $.ajax will try to look 
            // for function named 'renderData' in global scope.
            // How do I pass callbacks defined within requirejs define blocks?
        }

        function getData() {
            $.ajax({
                url: options.apiURL,
                dataType: options.format,
                data: {
                    format: options.format,
                    APIKey: options.APIKey,
                    source: options.source,
                    sourceData: options.sourceData,
                    count: options.count,
                    authMode: options.authMode
                },
                method: options.method,
                jsonpCallback: options.jsonpCallback,
                success: options.success_callback,
                error: options.error_callback,
                timeout: options.timeout
            });
        }
    }

    return {
        init: init
    }
}

我如何实现这一目标？

我知道我们可以使用JSONP请求作为require调用，但这限制了我使用jsonp，使GET请求和$ .ajax提供的所有其他功能。

Answer 1

This example允许您使用默认成功回调，或使用以下方式提供覆盖：

success: options.successCallback || renderData

（该示例使用jsfiddle rest URL - 这个事实并不重要，并且删除了数据对象以保持示例简短）

define("mymodule", ["jquery"], function($) {
    function renderData() {
        console.log("inside callback");
    }

    function getData(options) {
        $.ajax({
            url: options.apiURL,
            dataType: options.format,
            method: options.method,
            jsonpCallback: options.jsonpCallback,
            success: options.successCallback || renderData,
            error: null,
            timeout: options.timeout
        });
    }

    return {
        getData: getData
    }
});

require(["mymodule"], function(m) {
    console.log(m, m.getData({
        apiURL: "/echo/json/"
    }));
    console.log(m, m.getData({
        successCallback: function() { console.log("outside callback"); },
        apiURL: "/echo/json/"
    }));
});

会打印：

GET http://fiddle.jshell.net/echo/json/ 200 OK      263ms
Object { getData=getData()} undefined
GET http://fiddle.jshell.net/echo/json/ 200 OK      160ms
Object { getData=getData()} undefined
inside callback
outside callback

如何使用requirejs来处理ajax回调？

1 个答案: