-3

公開サイトと管理サイトの両方を含む大規模な Web アプリを作成中です。私は ajax と一緒に多くの jQuery を使用していますが、少し問題が発生しました。

ajaxに関しては、多くのコードを複製していることに気づきました。たとえば、ボタンを 1 回クリックすると、3 ～ 4 回の ajax 呼び出しが発生する可能性があります。これらの各呼び出しは、ほとんど同じ jQuery コードを使用しています。

すべてではないにしても、ほとんどの ajax 呼び出しを処理できるプラグインまたは js/jQuery 関数を探しています。このようなプラグイン/機能を知っている人はいますか? もしそうなら、教えてください。

返信ありがとうございます。

4

2 に答える 2

3

一般的なアクションのグローバル クリック ハンドラーを作成し、タグ自体にリクエストのデータを含めるだけです。例えば、

<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>

1 つのイベントを使用してそれらすべてを処理できるようになりました。

$(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-14T20:07:47.463 に答える
1

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();
于 2013-02-14T20:52:12.577 に答える