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之前显示一个元素，在回调中，在回调中，在数据到达时再次隐藏它。

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

如何在点击提交时显示动画loading.gif

1 个答案: