3

私はいつもこのようなものを使用しました：

$("a.button").click(function() {
    data = ...;
    url = ...;
    $.post(url, data, function() {
        $(this).toggleClass('active');
    });
});

問題は、ユーザーの接続が遅く、そのボタンをクリックすると、何も実行されないように見えることです。これactiveは、リクエストが完了すると、ボタンが自身のステータスを変更する（クラスを追加する）ためです。もちろん、リクエストの読み込み中にスピナーを追加することで、この動作を「修正」できます。

今これをチェックしてください：

$("a.button").click(function() {
    $(this).toggleClass('active');
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // if request is successful do nothing
        // else, if there's an error: $(this).toggleClass('active)
    });
});

つまり、ボタンを押すとすぐにボタンの状態を変更し、その後、成功/エラーをチェックします。これは良い方法ですか？あなたが考えていること？他の方法はありますか？

4

5 に答える 5

2

あなたはそこに一般的な考えを持っています。他の方法で実装できます。たとえば、グローバルAJAXajaxStartとajaxSuccess関数を設定します。

$("a.button").click(function() {
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // if request is successful do nothing
    });
}).ajaxStart(function () {
    $(this).toggleClass('active');
}).ajaxComplete(function () {
    $(this).toggleClass('active');
}).ajaxError(function () {
    //never forget to add error handling, you can show the user a message or maybe try the AJAX request again
});

これらのメソッドは、初期化や完了などの特定のイベントがページ上のAJAX要求に対して発生したときに呼び出されるハンドラーを登録します。jQuery.ajaxSetup（）のグローバルプロパティがtrueの場合、グローバルイベントは各AJAXリクエストで発生します。これはデフォルトです。注：グローバルイベントは、グローバルの値に関係なく、クロスドメインスクリプトまたはJSONPリクエストに対して発生することはありません。

ソース：http ：//api.jquery.com/category/ajax/global-ajax-event-handlers/

于 2012-02-10T20:04:11.320 に答える
2

これは、コードというよりもUIの質問です。個人的には、応答がない場合に混乱する可能性がある場合にスピナーを表示することを好みます。切り替えているクラスと、それが要素にどのような影響を与えるかがわからないため、成功する前に切り替えることが混乱を招くかどうかはわかりません。

どういうわけか、生きている誰もがローディングスピナーを知っています。それで行くのはおそらく安全です。

于 2012-02-10T20:06:09.490 に答える
0

使用$.ajax success：

jqueryドキュメントから：

$.ajax({
  url: "test.html",
  success: function(){
    $(this).addClass("done");
  }
});
于 2012-02-10T20:05:36.840 に答える
0

あなたは次のようなことをすることができます：

$("a.button").click(function() {
    var old_text = $(this).text();
    var button = $(this);
    $(this).text('Processing...');
    $(this).attr('disabled', 'disabled'); // disable to button to make sure it cannot be clicked
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // after request has finished, re-enable the link
        $(button).removeAttr('disabled');
        $(button).text(old_text);
    });
});

次に、エラーをキャッチするために同様のことを行う必要があります（ボタンを再度有効にします）。

于 2012-02-10T20:07:33.413 に答える
0

それは常にあなたがあなたのサイトを構築した方法に依存します、しかし私の意見では、アクティブな状態はあなたがクリックした瞬間にのみトリガーされるべきです。

つまり、onmousedownでクラスを追加し、onmouseupでクラスを削除します。

Ajax呼び出しは、別の関数をトリガーして、読み込みダイアログ/スピナーを表示する可能性があります。

それを構築するいくつかの方法があります：あなたがしたように各要素で個別に、または一般的なスタイリング機能を介して。Jasperが言ったように、ajaxStartajaxComplete関数を使用するAjaxについても同じです。

個人的にはAjaxを集中的に使用しており、常にDOMを動的に変更しているため、livequeryを使用して、特定のクラスの要素がDOMに表示されたときにイベントでスタイルを自動的に変更するように設定し、ajaxStartとajaxCompleteを使用して読み込みダイアログを表示します。

于 2012-02-11T15:39:46.473 に答える