ajax - 通用 jQuery AJAX 插件？

Question

我正在编写一个包含公共站点和管理站点的大型 Web 应用程序。我使用了很多 jQuery 和 ajax，我遇到了一些问题。

当涉及到 ajax 时，我发现自己重复了很多代码。例如，单击一个按钮可以导致 3-4 次单独的 ajax 调用。这些调用中的每一个都使用几乎相同的 jQuery 代码。

我正在寻找可以处理大多数（如果不是所有）ajax 调用的插件或 js/jQuery 函数。这里有人知道这样的插件/功能吗？如果是这样，请告诉。

提前感谢您的任何回复。

Answer 1

只需为常见操作创建一个全局点击处理程序，并将请求数据包含在标签本身上。例如，

<a class="loadcontent" href="/page1.html", data-target="#content">Page 1</a>
<a class="loadcontent" href="/page2.html", data-target="#content">Page 2</a>
<a class="loadcontent" href="/page3.html", data-target="#content">Page 3</a>

... somewhere else...
<a class="loadcontent" href="/foo/bar/somepage.html", data-target="#sub-content">Some other page</a>

现在您可以使用一个事件来处理它们：

$(document).on("click","a.loadcontent",function(e){
    e.preventDefault();
    $( $(this).data("target") ).load(this.href + " " + $(this).data("target"));
});

您可以以相同的方式使用更高级的操作进行类似的整合，从而允许您为应用程序的不同区域重复使用相同的事件处理程序。

<a href="/delete.php" data-entity-type="Person" data-entity-id="7363" class="delete">Delete Person</a>

和

$(document).on("click","a.delete",function(e){
    e.preventDefault();
    if (confirm("Are you sure you wish to delete this record?") == false) return;
    var $this = $(this), $data = $this.data();
    $.post(this.href,{entityType: $data.entityType, entityId: $data.entityId},"json")
        .done(function(data){
            if (data.result == "success") {
                $this.closest($data.parentSelector).remove();
            }
        });
});

Answer 2

jquery Promise 对 ajax 回调链接和提高代码重用和可读性有很大帮助。查看 jquery 文档以获取更多信息（http://api.jquery.com/jQuery.ajax/和http://api.jquery.com/promise/）。

这是一个可能有助于解释的例子。

        //-----------functions for rendering ajax responses
        function onError(){
           $("#errorMessage").text("opps!");
        }

        function displayInfo(data){
           $("#infoMessage").text(data);
        }

        function displayOtherInfo(data){
           $("#otherInfoMessage").text(data);
        }
        // ---------- end rendering functions ---------------


        //-----------functions for building ajax promises
        function getInfo(){
           buildAjaxPromise("InfoUrl", "data") //returns a promise that gets an ajax response from InfoUrl
             .done(displayInfo) //when the ajax completes call displayInfo
             .fail(onError);    //if something goes wrong call onError
        }

        function getOtherInfo(){
           buildAjaxPromise("OtherInfoUrl", "otherData")  //returns a promise that gets an ajax response from InfoOtherUrl
             .done(displayOtherInfo)  //when the ajax completes call displayInfo
             .fail(onError);          //if something goes wrong call onError
        }
        //-------------- end ajax promises -----------------

        //builds a jquery ajax promise
        function buildAjaxPromise(_url, _data){
           return $.ajax({ url: _url, data: _data, type:"GET", dataType:"json", contentType:"application/json; charset=utf-8"});
        }

        //start ajax calls
        getInfo();
        getOtherInfo();