データロードテキストがフォームで機能しない

Question

    <div class="tab-pane fade active in" id="actorDiv"> 
         <form role="form" id="addActorForm" action="http://localhost:5000/SearchActor" method="post" onsubmit="loading()"> 
          <div class="form-group"> 
           <label for="actor">Actor Name</label> 
           <input name="actor" class="form-control" 
             id="actor" placeholder="Enter actor name"/> 
          </div> 
          <input type="reset" class="btn btn-default"> 
          <button type="submit" class="btn btn-default" data-loading-text="Sending...">Submit</button> 
         </form> 
        </div> 

このフォームを嫌うと、ajax呼び出しが行われます。

<script type="text/javascript"> 
    var frm = $('#addActorForm'); 
    frm.submit(function (e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: frm.attr('method'), 
      url: frm.attr('action'), 
      data: frm.serialize(), 
      success: function (data) { 
       console.log('Submission was successful.'); 
       document.getElementById("actorDiv").innerHTML += "<div class=\"alert alert-dismissible alert-success\">\n" + 
        " <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" + 
        " <strong>Well done!</strong> You successfully read <a href=\"#\" class=\"alert-link\">this important alert message</a>.\n" + 
        "</div>"; 
      }, 
      error: function (data) { 
       console.log('An error occurred.'); 
       // document.getElementById("actorDiv").innerHTML = "<div class=\"alert alert-dismissible alert-danger\">\n" + 
       //  " <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" + 
       //  " <strong>Oh snap!</strong> <a href=\"#\" class=\"alert-link\">Change a few things up</a> and try submitting again.\n" + 
       //  "</div>"; 
       console.log(data); 
      }, 
     }); 
    }); 
</script> 

ここで、この呼び出しには返されるまでに時間がかかります。この間、送信ボタンをdata-loading-textに変更します。これは、データロードテキストがどのように機能するのでしょうか？もしそうなら、なぜそれは機能しませんか？ Ajaxの呼び出し自体はうまく動作します。 data-loading-textがなぜ機能していないのか分かりません。

Answer 1

あなたはBeforeSendとコンプリートを使用することができます。

<script type="text/javascript"> 
var frm = $('#addActorForm'); 
frm.submit(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     beforeSend: function(){ 
      button = $("#addActorForm button[type=submit]"); 
      button.html(button.attr("data-loading-text")); 
     }, 
     complete: function(){ 
      $("#addActorForm button[type=submit]").html("Submit"); 
     }, 
     type: frm.attr('method'), 
     url: frm.attr('action'), 
     data: frm.serialize(), 
     success: function (data) { 
      console.log('Submission was successful.'); 
      document.getElementById("actorDiv").innerHTML += "<div class=\"alert alert-dismissible alert-success\">\n" + 
       " <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" + 
       " <strong>Well done!</strong> You successfully read <a href=\"#\" class=\"alert-link\">this important alert message</a>.\n" + 
       "</div>"; 
     }, 
     error: function (data) { 
      console.log('An error occurred.'); 
      // document.getElementById("actorDiv").innerHTML = "<div class=\"alert alert-dismissible alert-danger\">\n" + 
      //  " <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" + 
      //  " <strong>Oh snap!</strong> <a href=\"#\" class=\"alert-link\">Change a few things up</a> and try submitting again.\n" + 
      //  "</div>"; 
      console.log(data); 
     }, 
    }); 
}); 

Answer 2

$ .ajax（）にはbeforeSendというプロパティがあります。このプロパティでは、最初に実行するコードの機能を定義できます。この関数を使用すると、ボタンのテキストを「読み込み中」に更新し、ajax呼び出しが完了したときにボタンテキストを再度更新することができます。

http://api.jquery.com/jquery.ajax/