使用ajax发布时显示加载图像答案

【问题标题】：Display loading image while post with ajax使用ajax发布时显示加载图像
【发布时间】：2016-11-09 17:46:35
【问题描述】：

我知道互联网上有数千个示例，但我希望脚本在检索数据时已经显示加载 gif 图像。我的Java知识很差，因此我问如何更改以下内容：

<script type="text/javascript"> 
 $(document).ready(function(){
  function getData(p){
    var page=p;
    $.ajax({
        url: "loadData.php?id=<? echo $id; ?>",
        type: "POST",
        cache: false,
        data: "&page="+ page,
        success : function(html){
            $(".content").html(html);
        }
    });
}
getData(1);

$(".page").live("click", function(){
    var id = $(this).attr("class");
    getData(id.substr(8));
        });
      });
  </script>

我的 div 在这里：

    <div class="content" id="data"></div>

谢谢。约翰

【问题讨论】：

标签： jquery ajax loading

【解决方案1】：

假设您在页面某处有一个标签，其中包含您的加载消息：

<div id='loadingmessage' style='display:none'>
  <img src='loadinggraphic.gif'/>
</div>

您可以在 ajax 调用中添加两行代码：

function getData(p){
    var page=p;
    $('#loadingmessage').show();  // show the loading message.
    $.ajax({
        url: "loadData.php?id=<? echo $id; ?>",
        type: "POST",
        cache: false,
        data: "&page="+ page,
        success : function(html){
            $(".content").html(html);
            $('#loadingmessage').hide(); // hide the loading message
        }
    });

【讨论】：

如果 Ajax 请求不成功，在这种情况下加载的 gif 仍然可见。
不是在成功回调中隐藏 div/gif，而是在 always() 方法下添加它（这是旧的 complete() 回调处理程序）

【解决方案2】：

看看ajaxStart和ajaxStop

【讨论】：

费利佩，感谢您的建议。但是，我忘了说我的js知识很差？我看到了这些页面，但不知道如何更改我的脚本。

【解决方案3】：

$.ajax(
{
    type: 'post',
    url: 'mail.php',
    data: form.serialize(),
    beforeSend: function()
    {
        $('.content').html('loading...');
    },
    success: function(data)
    {
        $('.content').html(data);
    },
    error: function()
    {
        $('.content').html('error');
    }
});

玩得开心！

如果您应该有快速加载时间以防止加载显示，您可以添加某种超时。

【讨论】：

【解决方案4】：

这非常简单且易于管理。

jQuery(document).ready(function(){
jQuery("#search").click(function(){
    jQuery("#loader").show("slow");
    jQuery("#response_result").hide("slow");
    jQuery.post(siteurl+"/ajax.php?q="passyourdata, function(response){
        setTimeout("finishAjax('response_result', '"+escape(response)+"')", 850);
            });
});

})
function finishAjax(id,response){ 
      jQuery("#loader").hide("slow");   
      jQuery('#response_result').html(unescape(response));
      jQuery("#"+id).show("slow");      
      return true;
}

【讨论】：

【解决方案5】：

<div id="load" style="display:none"><img src="ajax-loader.gif"/></div>

function getData(p){
        var page=p;
        document.getElementById("load").style.display = "block";  // show the loading message.
        $.ajax({
            url: "loadData.php?id=<? echo $id; ?>",
            type: "POST",
            cache: false,
            data: "&page="+ page,
            success : function(html){
                $(".content").html(html);
        document.getElementById("load").style.display = "none";
            }
        });

【讨论】：

【解决方案6】：

//$(document).ready(function(){
//	 $("a").click(function(event){
//		event.preventDefault();
//		$("div").html("This is prevent link...");
//	});
//});			

$(document).ready(function(){
	$("a").click(function(event){
		event.preventDefault();
		$.ajax({
			beforeSend: function(){
				$('#text').html("<img src='ajax-loader.gif' /> Loading...");
			},
			success : function(){
				setInterval(function(){ $('#text').load("cd_catalog.txt"); },1000);
			}
		});
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		
<a href="http://www.wantyourhelp.com">[click to redirect][1]</a>
<div id="text"></div>

【讨论】：

【解决方案7】：

确保改变 ajax 调用

async: true,
type: "GET",
dataType: "html",

【讨论】：

为什么？这如何回答这个问题？