jQuery提交并加载gif [英] jquery submit and loading gif

问题描述

im使用jquery提交php表单.在提交过程中，它将验证有效字段.因此，当用户单击提交"按钮时，我希望在处理表单时显示加载的gif.完成后，加载的gif会逐渐消失.

im using jquery to submit a php form. during the submission, it will validate for valid fields. so when user click the submit button, im expecting to show the loading gif while it process the form. when it is done, the loading gif fade off.

我的jquery提交如下:

my jquery submit is as follows:

$(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也会显示并继续显示.返回数据时如何隐藏它?

right now what happen is if the submit button is clicked, the loading gif shows and continue to show even after the data is returned. how do i hide it when data is returned??

推荐答案

将其显示或隐藏在任何ajax控件上:

Put up this to show and hide on any ajax control:

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

其中#Errorstatus是具有背景的跨度

where #Errorstatus is a span with a background

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

现在，消息将在任何ajax调用中显示，并带有动画gif和输入到跨度中的文本

Now, the messages show on any ajax call with the animated gif and the text you put in the spans

这篇关于jQuery提交并加载gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！