单击任何按钮时如何显示正在加载的 gif

Question

我想在我的 servlet 繁忙时显示正在加载的 gif。在我的 jsp 页面中，我有 4 个按钮。如果用户单击任何按钮，加载 gif 必须显示。我的 html 代码是这样的。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>TEC REPORT</title>
<script src="jquery-3.4.1.min.js"></script>

</head>
<body>
<h2 style="margin-left:35%;">Please insert Sales Order and click button</h2><br><br><br><br>
<form action="createReport" method="POST">
<table style="margin-left:40%;">
    <tr>
        <td>
            <input type="text" name="salesOrder" id="salesOrder" style="margin-left:20%;">
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr><td><br></td></tr>
    <tr><td><br></td></tr>
    <tr><td><br></td></tr>
    <tr><td><br></td></tr>
    <tr>
        <td>
            <b><label style="margin-left:-250px;">PDM REPORT</label></b><br><br>
            <input type="submit" name="pdm" value="" style="background:url('resources/images/Word-icon.png');background-size:50px 50px;width:50px;height:50px;margin-left:-225px;">
        <td>
            <b><label style="margin-left:-200px;">GATE 1 REPORT</label></b><br><br>
            <input type="submit" name="gate1" value="" style="background:url('resources/images/Word-icon.png');background-size:50px 50px;width:50px;height:50px;margin-left:-160px;">
        </td>
        <td>
            <b><label>SB72-0408 REPORT</label></b><br><br>
            <input type="submit" name="sb408" value="" style="background:url('resources/images/Word-icon.png');background-size:50px 50px;width:50px;height:50px;margin-left:50px;">
        </td>
        <td>
            <b><label style="margin-left:75px;">SHOP VISIT REPORT</label></b><br><br>
            <input type="submit" name="svr" value="" style="background:url('resources/images/Word-icon.png');background-size:50px 50px;width:50px;height:50px;margin-left:130px;">
        </td>
    </tr>
</table>
</form>
</body>
</html>

我应该使用 ajax 还是 servlet post？

Answer 1

你必须使用 AJAX。 Servlet 请求可以是同步的，这意味着它会等到处理完成后再执行下一个 activity。使用 AJAX 请求，您可以发送请求然后执行其他操作，而无需等待它完成处理，因为它是异步的。

将加载中的 gif 图片添加到 html 并将其隐藏（现在使用 html 本身的样式，您可以将其添加到单独的 CSS）：

<img src="path\to\loading\gif" id="img" style="display:none"/ >
Show the image when button is clicked and hide it again on success function

$('#buttonID').click(function(){
  $('#img').show(); //<----here
  $.ajax({
    ....
   success:function(result){
       $('#img').hide();  //<--- hide again
   }
}

确保在 ajax 错误回调中隐藏图像，以确保即使 ajax 失败，gif 也能隐藏。

Similar question: Show "loading" animation on button click

Answer 2

这是您修改后的文件。

步骤：

只需更改您的 img 网址，因为我已更改为加载实时图像。
删除最后 jquery 行 "event.preventDefault();" 以便您的表单提交将开始工作。
替换你的 jquery 本地文件路径，因为我已经添加了实时路径。

全部完成，现在在您提交表单时，加载程序将自动开始加载，当您的服务器响应时，它将在页面重新加载时隐藏加载程序（通过重新加载提交表单）

您的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>TEC REPORT</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <style>
            img.loaderimg {
                position: absolute;
                top: 30%;
                left: 40%;
                display: none; 
            }
        </style>
    </head>
    <body>
        <h2 style="margin-left:35%;">Please insert Sales Order and click button</h2><br><br><br><br>
        <form action="" id="createReport" method="POST">
            <table style="margin-left:40%;">
                <tr>
                    <td>
                        <input type="text" name="salesOrder" id="salesOrder" style="margin-left:20%;">
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr><td><br></td></tr>
                <tr><td><br></td></tr>
                <tr><td><br></td></tr>
                <tr><td><br></td></tr>
                <tr>
                    <td>
                        <b><label style="margin-left:-250px;">PDM REPORT</label></b><br><br>
                        <input type="submit" name="pdm" value="" style="background:url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190412-institute-vaseline-1555101948.png');background-size:50px 50px;width:50px;height:50px;margin-left:-225px;">
                    <td>
                        <b><label style="margin-left:-200px;">GATE 1 REPORT</label></b><br><br>
                        <input type="submit" name="gate1" value="" style="background:url('https://specials-images.forbesimg.com/imageserve/5d1225c2142c500008c72898/960x0.jpg');background-size:50px 50px;width:50px;height:50px;margin-left:-160px;">
                    </td>
                    <td>
                        <b><label>SB72-0408 REPORT</label></b><br><br>
                        <input type="submit" name="sb408" value="" style="background:url('https://www.brandchannel.com/wp-content/uploads/2018/11/unilever-baby-dove-personalized.jpg');background-size:50px 50px;width:50px;height:50px;margin-left:50px;">
                    </td>
                    <td>
                        <b><label style="margin-left:75px;">SHOP VISIT REPORT</label></b><br><br>
                        <input type="submit" name="svr" value="" style="background:url('https://www.oberlo.com/wp-content/uploads/2017/11/Backpack.jpg');background-size:50px 50px;width:50px;height:50px;margin-left:130px;">
                    </td>
                </tr>
            </table>
        </form>
        <img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" class="loaderimg" />
    </body>
</html>
<script>
    $("#createReport").submit(function (event) {
        $("img.loaderimg").show(); 
        event.preventDefault(); 
    });
</script>

单击任何按钮时如何显示正在加载的 gif

how to show loading gif when clicked any button

java

ajax

servlets