Question

即时通讯使用jquery提交php表单。在提交期间，它将验证有效字段。所以当用户点击提交按钮时，我希望在处理表单时显示加载gif。当它完成时，加载gif消失。

我的jquery提交如下：

$(document).ready(function(){
 $("#loadinggif").hide();
 $(function(){
  $("#form").submit(function(){
   $.post("/postform.php", $("#form").serialize(),
   function(data){
    // Put an animated GIF image insight of content
     $("#loadinggif").fadeIn().animate({ opacity: 1.0 },3000).fadeOut();

    if(data.error != null){

     $("#ajax_messagepost").html(data.error);
    }
    else{
     var url = "/confirmation.php";
     $(location).attr('href',url);
    }
   }, "json");

   return false;

  });
 });
});

现在发生的情况是，如果单击提交按钮，即使在返回数据后，加载的gif也会显示并继续显示。如何在返回数据时隐藏它？

Answer 1

由于您在提交中执行ajax并希望动画显示和消失，我建议您在jQuery中使用全局ajax助手：

ajaxStart
ajaxStop

Grz，Kris。

Answer 2

用这个来显示和隐藏任何ajax控件：

var loadingMessage = 'Please wait loading data for ' + defaulttext;
$(function()
{
    $("#Errorstatus")
    .bind("ajaxSend", function()
    {
        $(this).text(loadingMessage);
        $(this).show();
    })
    .bind("ajaxComplete", function()
    {
        $(this).hide();
    });
});

其中#Errorstatus是带背景的范围

 <div class="newProcedureErrorStatus ajaxLoading " id="newProcedureErrorStatus">
                    <span id="Errorstatus" class="ui-state-error-text newProcedureErrorStatusText"></span>
                    <span id="Errorstatus2" class="ui-state-error-text newProcedureErrorStatusText">
                    </span>
</div>

css是：

.ajaxLoading
{
    width: 100%;
    background-image: url("../Images/ajax-loader.indicator.gif");
    background-repeat: no-repeat;
    background-position: left middle;
}

现在，消息显示在任何带有动画gif的ajax调用和你放在跨度中的文本

jquery提交并加载gif

2 个答案: