通用jQuery AJAX插件？

-2

我正在編寫一個包含公共和管理網站的大規模網絡應用程序。我使用了很多jQuery以及ajax，並且遇到了一些問題。通用jQuery AJAX插件？

對於ajax，我發現自己複製了很多代碼。例如，一個按鈕點擊可能導致3-4個獨立的ajax調用。每個調用都使用幾乎相同的jQuery代碼。

我正在尋找一個插件或js/jQuery函數，可以處理大多數，如果不是所有的ajax調用。有沒有人知道這樣的插件/功能？如果是這樣，請告訴。

在此先感謝您的答覆。

來源

2013-02-14 Richard M

你能顯示一些代碼嗎？ – Adam 2013-02-14 19:59:22

我很困惑你在插件中尋找什麼。你到底想要做什麼？「處理AJAX呼叫」是什麼意思？ jQuery是否簡寫爲'.get'，'$ .getJSON'，'$ .post'和'$（）。load'還不夠好？ – 2013-02-14 20:02:55

只需爲常用操作創建全局點擊處理程序，並將請求的數據包含在標記本身上。例如，

<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(); 
      } 
     }); 
});

來源

2013-02-14 20:07:47

這是一個讓事情整潔簡單的不錯方式。 – 2013-02-14 20:09:36

jQuery的承諾有很大的幫助與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();

來源

2013-02-14 20:52:12

通用jQuery AJAX插件？

回答

相關問題