在jQuery中显示发送结果前显示加载状态

Question

我有一段简单的jQuery代码，可以通过ajax在jQuery模态窗口中发送内容！一切都没有任何问题。通常，在单击发送按钮后，1-2秒后此代码将显示结果。

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
    });
};

我的问题是，当点击“发送”按钮后，在显示结果之前，如何添加并显示加载图片？

- Alireza

---

SO上有大量的示例可用，例如检查此页面上的相关项目... - Reinder Wit

我没有看到你的点击事件。 - Explosion Pills

https://dev59.com/X3E95IYBdhLWcg3wkeof - AliRıza Adıyahşi

Answer 1

您可以通过使用ajaxStart()和ajaxComplete()来完成此操作。

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

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

$.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); }
    });
 });

- NullPoiиteя

---

“complete”是我正在寻找的，它对我很有帮助。 - JonSnow

Answer 2

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

如果您有一个带有id="button"的按钮，并且有一个<div id="loading-div"></div>，您可以在其中显示图像。 http://api.jquery.com/jQuery.ajax/

- Laz Karimov

---

仍然是最佳答案！ - proofzy

Answer 3

你可以使用$.ajax()代替$.post()，并添加一个beforeSend函数。

- Matanya