带有 Ajax 回调的 Javascript 模块模式

Question

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

我知道在 SOF 和互联网上有很多链接、文档可用，但我真的无法直接回答我的简单要求，所以我可以根据理解将它提升到一个新的水平。

我在这里写了一段测试代码...

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 保持私有(private)以从数据库中提取记录，而 getOffers 是公开的，据我所知从外部调用。但是，我如何在它们之外获得我的 ajax 调用的成功返回？

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

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

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

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

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

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

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

Answer 1

But, how do i get the success return of my ajax call outside of them?

让 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)。