2

jQueryです。

サインアップフォームがあります。ドメインテキストボックスフィールドで、ユーザーはドメインに入力し、ドメインの可用性を検証するためにregistarAPIへのonblurAjax呼び出しを行います。

ネットワーク速度によっては、検証に最大15秒かかる場合があります。

この待機期間中に、ユーザーが送信ボタンをクリックした場合、どのようにブロックしますか？

私の考えは単純です。Ajax呼び出しの読み込みが完了する前に、ユーザーが[送信]をクリックすることを許可したくありません。

方法は考えられますが、それが良い方法かどうかはわかりません。アドバイスが必要です。

beforeSend: function(){
    $("#btnSubmit").attr("disabled", "disabled");
},

complete: function(){
    $("#btnSubmit").attr("disabled", "");
}

<input type="button" name="btnSubmit" id="btnSubmit" value="my button" />
4

6 に答える 6

6

AJAX呼び出しで使用しないものは何でもasync: false、特にリクエストの有効期間が非常に長い（15秒）ためです。AJAX呼び出しが完了するまで、すべてのJavascriptが無効になります。

あなたのやり方は大丈夫です。jQueryのグローバルAJAXイベントハンドラーを使用して一般化できます。関連する各入力コントロールに「ajax」のような適切なマーカークラスを与えます。

<input type="button" class="ajax" value="Register Domain">

と：

$(document).ajaxStart(function() {
  $(".ajax").attr("disabled", true);
}).ajaxComplete(function() {
  $(".ajax").removeAttr("disabled");
});

つまり、ここで行っているのは、グローバルAJAXイベントをリッスンすることです。イベントの進行中は、AJAX呼び出しの進行中にクリックしたくないすべてのコントロールを無効にします。

于 2010-02-04T09:27:21.053 に答える
3

に設定asyncするとfalse機能する場合がありますが、ブラウザが15秒間完全にハングする場合があります。最善の策は、送信要素を無効にし、検証が進行中であるかどうかを格納する変数を使用して、他の方法で送信を防ぐことです。

var validating = false;

$(function() {

    $('form').submit(function() {
        if(validating) return false;
        var button = $(this).find('input:submit, input:button');

        button.attr('disabled', 'disabled');
        validating = true;

        $.ajax({
            url: 'validator.php',
            data: $(this).serialize(),
            success: function() {
                validating = false;
                button.removeAttr('disabled');
            }
        });
    });
});

このように、ユーザーは他の方法でフォームを送信できません。送信ボタンのみを無効にすると、Enterキーを使用してフォームを送信できる場合があります（これについてはよくわかりません）。検証が実行されているかどうかを示す変数を使用することは、誤って送信することを防ぐ確実な方法です。

于 2010-02-04T09:26:48.730 に答える
1

BlockUiをご覧ください。

実装は非常に簡単です。要素をブロックしたり、処理タイプのメッセージでページ全体をブロックしたりできるため、ユーザーは何かが起こっていることを知ることができます。次に、ajax呼び出しの完了時にブロックを解除するだけです。

私が使った例

$('#elementtobloack').block({
        centerY: 0,
        message: 'Some useful message'       
    });

 $.ajax(
            {
                type: "POST",
                url: "...",
                data: "{}",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    //do something
                    //unblock your element 
                    $('#elementtoblock').unblock();
                },
                error: function(msg) {
                    //do something on error -- alert(msg.responseText);
                    //unblock on failure as well or the element will remain blocked
                    $('#elementtobloak').unblock();
                }
            });
于 2010-02-04T11:02:17.107 に答える
0

最終的にどのように実行する場合でも、検証中は必ず進行状況インジケーターを表示してください。

ユーザーがすべてのフォーム要素に入力し、submit後でボタンを押すことができない場合（検証プロセスがまだ実行されているため）、ユーザーは非常に混乱します。

15秒は長い時間なので、ユーザーが何が起こっているのかを知っていることを確認してください。

于 2010-02-04T09:22:14.947 に答える
0

私はこの状況を自分で経験しました。私のアプローチは、嘆きのGIFといくつかの説明テキストで小さなモーダルウィンドウを開くことでした。

Ajax呼び出しが終了したら、モーダルウィンドウを閉じます。

お役に立てば幸いです。

于 2010-02-04T09:27:34.857 に答える
-1

入力ボタン：

<input typ = "submit" value = "Register" onsubmit = "return ajaxCheck（）;" />

Jsコード：

var onAjax = false;
関数ajaxCheck（）{
  if（onAjax）
    falseを返します。
  そうしないと
    trueを返します。
}


$（ "element"）。onblur（function（）{
  onAjax = true;
  //ここで行う必要があることは何でも
  $ .ajax（{
    //標準パラメータ
    成功：function（）{
      onAjax = false;
    }、
    失敗：function（）{
      onAjax = false;
    }
  }）;
}）;
于 2010-02-04T09:27:38.320 に答える