hiển thị tải trước khi hiển thị kết quả gửi trong jquery

Question

Tôi có một mã jquery đơn giản để gửi một nội dung trong cửa sổ phương thức jQuery với ajax! mọi thứ đang hoạt động mà không có bất kỳ vấn đề gì. trong bình thường, sau khi nhấp vào nút gửi, sau 1-2 giây mã này cho thấy kết quả,

function AddFastqpro(action) { 
    var b = {}; 
    b[dle_p_send] = function() { 
     var response = $('#dle-poke').val() 
     $.post(dle_root + 'engine/ajax/fast.php', { text: response, action: action }, 
     function (data) { 
      if (data == 'ok') { 
       DLEalert(dle_p_send_ok, dle_info); 
      } 
      else { DLEalert(data, dle_info); } 
     }); 
    }; 

    $('body').append("<div id='dlepopup' style='display:none'><textarea id='dle-poke'></textarea></div>"); 

    $('#dlepopup').dialog({ 
     autoOpen: true, 
     modal: true, 
     draggable: false, 
     width: 350, 
     dialogClass: "modalfixed", 
     buttons: b 
    }); 
}; 

Câu hỏi của tôi là, làm thế nào tôi có thể thêm và hiển thị một hình ảnh tải sau khi nhấp vào gửi và trước khi hiển thị kết quả ?

Answer 1

bạn có thể làm điều này bằng ajaxStart() và ajaxComplete()

$("#loading").ajaxStart(function(){ 
    $(this).show(); 
}); 

$("#loading").ajaxComplete(function(){ 
    $(this).hide(); 
}); 

hoặc

$.ajax({ 
    url : dle_root + 'engine/ajax/fast.php', 
    data: { text: response, action: action }, 
    beforeSend: function(){ 
    $("#loading").show(); 
    }, 
    complete: function(){ 
    $("#loading").hide(); 
    }, 
    success: function (data) { 
     if (data == 'ok') { 
      DLEalert(dle_p_send_ok, dle_info); 
     } 
     else { DLEalert(data, dle_info); } 
    }); 
}); 

Answer 2

bạn có thể sử dụng $.ajax() thay vì $.post(), và thêm một chức năng beforeSend

Answer 3

$('#button').click(function(){ 
    $('#loading-div').html('<img src="..." />'); 
    $.ajax({ 
     type: 'POST', 
     url: '...', 
     data: {...}, 
     success: function(response) { 
      $('#loading-div').html(''); 
     } 
    }); 
}); 

Trong trường hợp nếu bạn có nút với id="button", và một số <div id="loading-div"></div> trong đó bạn có thể hiển thị hình ảnh

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