Question

我想做一些非常简单的事情。我的页面中有一个按钮..

<body>
<img src="images/myloadingimage.png" style="display: none;" id="loading_image">
    <form id="myform" type="post" action="test.php" >
        Name : <input type="name" id="name" value="" /><br />
        LName : <input type="lname" id="lname" value="" /><br />
        <input type="submit" id="submit" name="Submit" />
    </form>
</body>

现在我想要的是当用户按下此提交按钮时..它显示＆＃34; loading＆＃34; gif动画直到表单提交完成。我想用Javascript。我该如何实现呢。

Answer 1

我喜欢将div设置为屏幕，因此图像已预先加载：

<div id="LoadingDiv" style="left: -200px;">
    <div>
        <img src="images/loading.gif" title="Loading" />
        <div class="LoadingTitle">Loading...</div>
    </div>
</div>

然后使用一点JQuery：

var div = $("#LoadingDiv");
function LoadingDiv() {
    div.animate({
        left: parseInt(div.css('left'), 10) == 0 ?
          -div.outerWidth() * 2 :
          0
    });
}

（这是更简单的版本）

Answer 2

将Jquery BlockUI plugin与jquery Ajax调用一起使用。

显示您需要编写的加载消息

$.blockUI();

用于隐藏您需要编写的加载消息

$.unblockUI();

此插件还有许多可用的自定义设置。 Check the demos here

This link will help you to integrate Jquery BlockUI plugin with Jquery Ajax call

希望这有帮助。

Answer 3

只需编写默认表单操作并显示加载图标，并在成功完成ajax请求后删除。

<强>样品：

   $("form").submit(function (e) {
            e.preventDefault(); // stops the default action
            $("#loader").show(); // shows the loading screen
            $.ajax({
                url: test.php,
                type: "POST"
                success: function (returnhtml) {
                    $("#loader").hide(); // hides loading sccreen in success call back
                }
            });
        });

Answer 4

如果你不想使用ajax，你可以这样做。在显示加载图标之前，如果需要，您还需要为任何javascript验证添加代码。

$("#submit").on("click", function(e){
     $("#loading_image").show();
     $("#myform").submit();
     e.preventDefault();
});

Answer 5

您需要手动处理表单onsubmit事件，发出POST AJAX请求。在请求之前显示加载图像，一旦完成，您需要再次隐藏它。

检查代码并注明重要地点：

$('#myform').on('submit', function(e) {

    // Prevent default browser form submission with page reload
    e.preventDefault();

    // Show loading indicator
    var $loading = $('#loading_image').show();

    // Make POST request with form parameters
    $.post(this.action, $(this).serialize()).done(function(response) {

        // Hide loading image once request is complete
        $loading.hide();

        // Do something with responce
        console.log(response);
    });
})

Answer 6

你可以通过jQuery实现这一点。

制作jQuery ajax POST请求

//Do the image load here
//now make the ajax call
$.post("test.php",$('#myform').serialize(),function(data){
     //if success
     //remove gif image
     //continue with whatever you want
},"json");//incase you need a json reply

提交表单时等待消息

6 个答案: