Question

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

我发现自己在ajax上复制了很多代码。例如，单击一次按钮就可以进行3-4次单独的ajax调用。每个调用使用几乎相同的jQuery代码。

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

提前感谢您的回复。

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 promises在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();

多用途的jQuery AJAX插件？

2 个答案: