0

ユーザーがボタンをクリックした後にボタンを無効にして、二重送信やアクションを防ぐことに取り組んでいます。ボタンは2種類あります。送信してページをリロードするphpボタン（またはフォームボタン）。私はそれで何の問題もありません。ボタンを永久に無効にするだけで、リロード後に再びプッシュ可能になります。ここに例があります：

$(document).on('click', 'button', function() {
    var $this = $(this);
        htmls =  $(this).html();
       $(this).prop("disabled", true);
       setTimeout(function(){
           $this.prop("disabled", false);
       }, 2000);
});

これは現在 2 秒間ですが、setTimeout の部分は削除します。より大きな問題は Javascript ボタンです。このボタンはページをリロードしません。ユーザーがボタンを押すと、ボタンで開始されたプロセスが終了するまで無効にし、再度有効にする必要があります。ボタンが送信を行うかどうか、またはフォーム内のすべてのフィールドをクリアするかどうかを確認できます。ボタンを押して開始したプロセスを取得し、終了したら作業できるのではないかと考えていました。これは可能ですか？または、他の回避策はありますか？

4

2 に答える 2

2

jQuery.ajax を使用してサーバーに要求を送信し、応答がサーバーから返されたら、同じフォームまたは別の作業を続行できます。フォームからすべてのデータを収集し、json オブジェクトとしてサーバーに送信する必要があることに注意してください。

あなたのコードに基づく小さな例:

$(document).on('click', 'button', function() {
    var $this = $(this);
        htmls =  $(this).html();
       $(this).prop("disabled", true);
       $.ajax({
          type: "POST",
          url: "some.php", //url to make post to
          data: JSON.stringify(formdata), //data collected from your form
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          }).done(function( result) {
              //put here the code to process the result from server
          }).fail(function() { 
              alert("error"); // if something went wrong on server
          })
           .always(function() { 
              $(this).prop("disabled", false); //back enabling your button and maybe some other logic
          });;
});

jQuery.ajax の詳細については、http: //api.jquery.com/jQuery.ajax/ をご覧ください。

他の質問があれば教えてください;）これが少し役立つことを願っています

于 2013-03-26T07:29:34.070 に答える
1

あなたはこのようにすることができます

<input type='button' value='Javascript button' id="btn" />
    <script>
        $(document).ready(function () {

            $("#btn").click(function () {
                $(this).prop("disabled", true);
                // long processing
                $(this).prop("disabled", false);
            });

            //OR with a jquery request 

            $("#btn").click(function () {
                $(this).prop("disabled", true);

                $.ajax({
                    type: "POST",
                    url: "some url",
                    data: JSON.stringify(data),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    sucess: function (data) { alert(data); }
                }).always(function () {
                    $(this).prop("disabled", false);
                });

            });


        });
    </script>
于 2013-03-26T07:24:01.617 に答える