3

如果我必须利用 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 提供的所有其他功能。

4

1 回答 1

5

此示例将允许您使用默认成功回调或提供覆盖，使用：

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
于 2013-09-10T10:11:19.730 回答