jquery - 单击提交时如何显示动画加载.gif

Question

如何显示动画加载...单击提交时

<form id="submit">
  <textarea name="update"id="update"maxlength="500"></textarea>
  <input type="submit" id="saveResult" value="Save All Data" />
  <div id="displayResult"></div>

提交表单时显示动画加载

$("#saveResult").click(function() {
    var firstname = $("#update").val();
    lastname = $("#lname").val();
    $.post("re.asp", {
        update2: firstname
    }, function(data) {
        $("#displayResult").html(data);
    });
    $('#update').val('');
    return false;
}); 

Answer 1

您可以在调用o之前和内部post显示一个元素$.post，在回调中，当数据到达时再次隐藏它。

//jQuery
$("#saveResult").click(function () {
     var firstname = $("#update").val();
     lastname = $("#lname").val();

     //showing your loading element
     $('.loading').show();

     $.post("re.asp", {
         update2: firstname
     }, function (data) {
         $("#displayResult").html(data);

        //hidding your loading element
         $('.loading').hide();
     });
     $('#update').val('');
     return false;
 });

当然，您需要使用加载类创建一个元素：

//HTML
<div class="loading">
    <img src="loadingGif.gif" alt="Loading..." />
</div>

它应该默认隐藏：

//CSS 
.loading{
    display:none;
}