在 jquery 中显示发送结果之前显示加载

Posted 2023-03-14

【中文标题】在 jquery 中显示发送结果之前显示加载

【英文标题】：show loading before showing send result in jquery

【发布时间】：2012-11-22 06:12:07

【问题描述】：

我有一个简单的 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
    );
;

我的问题是，如何在点击发送后和显示结果之前添加和显示加载图片？

【问题讨论】：

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

那里没有看到你的点击事件

***.com/questions/2257975/…

【参考方案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); 
    );
 );

【讨论】：

"complete" 是我正在寻找的东西，它对我有用

【参考方案2】：

您可以使用$.ajax() 代替$.post()，并添加beforeSend 函数

【参考方案3】：

$('#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/

【讨论】：

这仍然是最好的答案！