带有 Ajax 回调的 Javascript 模块模式

Question

我正在编写一个网站，它有几个类别的数据必须从 mongo 数据库中提取。到目前为止，我已经编写了计划 ajax 调用，但由于这个要求需要我继续使用相同的 ajax 调用来处理各种事情，我已经开始考虑可重用代码/模式。我是 Javascript 模块模式的新手，但到目前为止，我阅读和理解的内容，看起来 Revealing 模块模式对我来说可能是一个好的开始，而不是与其他面向对象的东西混淆太多。

我知道 SOF 和 Internet 中有很多链接、文档可用，但我真的无法直接回答我的简单要求，以便我能以理解的方式将其提升到一个新的水平。

我这里写了一个测试代码……

var myApp = new function () {

    var Var1 = [];

    getData = function (sendData) {

        return $.ajax({
            type: "POST",
            url: URL,
            data: sendData,
            datatype: "json",
            success: function (results) {}
        });

    };

    getOffers = function (sendData) {
        getData(sendData);
    };

    return {
        getOffers: getOffers
    };

}();

getData 保持私有以从数据库中提取记录，而 getOffers 是公开的，据我所知，它可以从外部调用。但是，我如何在它们之外获得我的 ajax 调用的成功返回？

我想要实现的是有一个简单的方法来调用我的函数，如下所示..

myApp.getOffers({
    'showData': 1,
    'myLocation': "Location1",
    'clientID': "Client1"
});

myApp.getOffers({
    'showData': 1,
    'myLocation': "Location2",
    'clientID': "Client2"
});

从我的 mongodb 中获取数据，以便我可以根据我的要求更改它们。当它们中的每一个返回值时，我会操纵它们以在 diff Div 中显示它们，以便动作需要超出我的定义，因为它们不是静态的。

我如何实现它，因为当我直接从函数返回某些内容时它可以工作，但是当它必须从 ajax 返回时它不是由于我必须编写的回调。但是这通常是如何编写的，以便我们可以重用代码并以最简单的方法更改发送的各种字段？

请更改此代码以便我更好地理解它并从一些非常基本的东西开始以满足我的要求。或向我发送一些真正解释我的基础知识的链接。

另外，我坚持为 myApp 使用 ajax“POST”方法的原因是，当使用“GET”方法时，知道我通过什么变量（从其源代码）的用户可以直接将它们作为操作发送.php?变量=1&变量=2。如果我可以安全地使用 GET 方法，我该如何避免？

Answer 1

但是，我如何在它们之外获得我的 ajax 调用的成功返回？

让 getOffers 返回 jqXHR getData 返回如下 -

var myApp = (function () {

    var Var1 = [];

    var getData = function (sendData) {

        return $.ajax({
            type: "POST",
            url: URL,
            data: sendData,
            datatype: "json",
            success: function (results) {}
        });

    };

    var getOffers = function (sendData) {
        // return the jqXHR returned by getData
        return getData(sendData);
    };

    return {
        getOffers: getOffers
    };

})();

$.ajax({}) 返回的jqXHR 对象是Promise - 当您收到 Ajax 请求的成功响应时 - 您可以像这样附加成功处理程序 - 在您的 ajax 请求之外

myApp.getOffers({
    'showData': 1,
    'myLocation': "Location1",
    'clientID': "Client1"
}).done(function (data, textStatus, jqXHR) {

    // work with DOM here
});

更多关于 Jquery Deferreds/Promises here -

您还通过在声明过程中缺少前面的var 将getData、getOffers 设为全局。

根据您对使用POST 而不是GET 的评论，一般经验法则是-GET 用于检索数据，POST 用于保存-仅仅因为您使用POST 这并不意味着一些无法嗅探您发送的数据，它只是请求正文的一部分，而不是请求 URL。如果您认为您发送的数据非常敏感，您应该考虑为您的应用启用SSL(HTTPS)。