데이터 로딩 텍스트가 양식에 적합하지 않습니다.

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> 

따라서이 양식을 무시하면 아약스 호출이 이루어집니다.

<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으로 변경하고 싶습니다. 데이터 로딩 텍스트가 어떻게 작동합니까? 그렇다면 왜 작동하지 않을까요? 아약스 호출 자체가 작동하고 잘 반환합니다. 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/