投稿フォーム中のbeforeSend関数のjQuery Ajax setTimeout

Question

私はPHPとajaxによって作成された連絡フォームを持っています。私がSend MessageボタンのボタンのテキストをSending...beforeSendの機能の中にクリックしたときに欲しいです。私はSending...のテキストを約5秒表示するまで、時間をボタンに設定したい。私は以下のようにsetTimeout関数を作成しましたが

編集コードを動作しないだけであなたがする必要はありません、私はMYD done関数内でいくつかの条件文を追加して、私はcomplete関数内

(function (jQuery, window, document, undefined) { 
'use strict'; 

jQuery('#contactForm').submit(function(event) { 

    var bsnname = jQuery('#bsnname').val(); 
    var bsnsubject = jQuery('#bsnsubject').val(); 
    var bsnemail = jQuery('#bsnemail').val(); 
    var bsnmessage = jQuery('#bsnmessage').val(); 

    jQuery.ajax({ 
     url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php', 
     type: 'POST', 
     data: {'bsnname': bsnname, 'bsnsubject': bsnsubject, 'bsnemail': bsnemail, 'bsnmessage': bsnmessage}, 
     dataType: 'json', 
     cache: false 
    }) 
    .done(function(data) { 
     if (!data.success) { 
      if(data.errors.nameEmpty) { 
       jQuery('#name-field').append('<em class="text-danger">' + data.errors.nameEmpty + '</em>'); 
      } else { 
       jQuery('#name-field .text-danger').fadeOut(25); 
       if(data.errors.nameLengthErrors) { 
        jQuery('#name-field').append('<em class="text-danger">' + data.errors.nameLengthErrors + '</em>'); 
       } 
      } 
      if(data.errors.subjectEmpty) { 
       jQuery('#subject-field').append('<em class="text-danger">' + data.errors.subjectEmpty + '</em>'); 
      } else { 
       jQuery('#subject-field .text-danger').fadeOut(25); 
       if(data.errors.subjectLengthErrors) { 
        jQuery('#subject-field').append('<em class="text-danger">' + data.errors.subjectLengthErrors + '</em>'); 
       } 
      } 
      if(data.errors.emailEmpty) { 
       jQuery('#email-field').append('<em class="text-danger">' + data.errors.emailEmpty + '</em>'); 
      } else { 
       jQuery('#email-field .text-danger').fadeOut(25); 
       if(data.errors.emailFormatErrors) { 
        jQuery('#email-field').append('<em class="text-danger">' + data.errors.emailFormatErrors + '</em>'); 
       } 
      } 
      if(data.errors.messageEmpty) { 
       jQuery('#message-field').append('<em class="text-danger">' + data.errors.messageEmpty + '</em>'); 
      } else { 
       jQuery('#message-field .text-danger').fadeOut(25); 
       if(data.errors.messageLengthErrors) { 
        jQuery('#message-field').append('<em class="text-danger">' + data.errors.messageLengthErrors + '</em>'); 
       } 
      } 
     } else { 
       jQuery('#success-msg').append('<p class="bg-success">Message has been sent</p>'); 
     } 

    }) 
    .fail(function(data) { 
    }); 

    jQuery(document).ajaxComplete(function() { 
     document.getElementById("contactForm").reset(); 
    }); 

    event.preventDefault(); 
}); 
}(jQuery, window, document)); 

Answer 1

をいくつかのコードを追加しましたbeforeSendを使用してください。以下に示すように、AJAX関数をsetTimeoutコールバック関数内にラップするだけです。

jQuery('button').text("Sending..."); 

setTimeout(function() { 
    jQuery.ajax({ 
     url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php', 
     type: 'POST', 
     data: {'bsnname': bsnname, 'bsnsubject': bsnsubject, 'bsnemail': bsnemail, 'bsnmessage': bsnmessage}, 
     dataType: 'json', 
     cache: false, 
     success: function (data) { 
      // Some code here work correctly 
     }, 
     error: function() { 
      // Some bug messages 
     }, 
     complete: function() { 
      // good place to change the button back to its original text 
     } 
    }); 
}, 5000); 

しかし、あなたが尋ねるべき最も大きな質問は、これを行うことのポイントは何ですか？ボタンのテキストを変更する要求を遅らせたいだけです。

編集：ここでは、私があなたが欲しいと思うものの簡単なdemoです。

Answer 2

AJAXのbeforeSendは、あなたが望むことを行うためのものです。jaxコールの処理中にメッセージを表示します。

結果が既に表示されているのに対し、ユーザーには読み込み中であるというメッセージを表示するのは紛らわしいものです。

私はあなたが何をしているかのように少し混乱している