可重用的JS ajax模式(jquery)

Eey*_*ore 6 javascript jquery design-patterns

我想知道是否有更好的方法来为jquery创建可重用的ajax对象.

这是我未经测试的代码.

var sender = {
    function ajax(url, type, dataType,  callback) {
        $.ajax({
            url: url,
            type: type,
            dataType: dataType,
            beforeSend: function() {
                onStartAjax();
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                callback.failure(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function(data, textStatus) {
                callback.success(data, textStatus);
            },
            complete: function (XMLHttpRequest, textStatus) {
                onEndAjax();
            }
        });
    },
    function onStartAjax() {
        // show loader
    },
    function onEndAjax() {
        // hide loader
    }  
};


<script type="text/javascript">
    var callback = {
        success: function(data, textStatus) {
            $('#content').html(data);
        },
        failure: function(XMLHttpRequest, textStatus, errorThrown) {
            alert('Error making AJAX call: ' + XMLHttpRequest.statusText + ' (' + XMLHttpRequest.status + ')');
        }
    }

    sender.ajax(url, type, dataType, callback);

</script>
Run Code Online (Sandbox Code Playgroud)

Mar*_*iss 4

您可以单独设置始终相同的基本选项。

\n\n

例如,如果你总是在这里使用相同的东西:

\n\n
    type: type, \n    dataType: dataType, \n
Run Code Online (Sandbox Code Playgroud)\n\n

对于这些类型,您可以单独设置它们。

\n\n

以下是执行此类操作的方法:

\n\n
$.ajaxSetup({\n  type: "POST",\n  contentType: "application/json; charset=utf-8",\n  data: "{}"\n});\n
Run Code Online (Sandbox Code Playgroud)\n\n

现在这些都已设置,您可以简化您的个人 ajax 调用。

\n\n

编辑:

\n\n

注意:将参数设置为 $.ajax 会覆盖这些默认值。因此,将 \xe2\x80\x9cdata\xe2\x80\x9d 预设为空 JSON 字符串是安全且理想的。这样,任何指定数据参数的 $.ajax 调用都将按预期运行,因为不会使用默认值。这有助于避免在部署站点上难以发现的问题。

\n