单击任何按钮时如何显示加载gif答案

【问题标题】：how to show loading gif when clicked any button单击任何按钮时如何显示加载gif
【发布时间】：2020-04-16 14:46:39
【问题描述】：

我想在我的 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？

【问题讨论】：

是的，你也可以使用 ajax
我应该共享 ajax 代码来运行那个 gif 吗？
@AbdulrehmanSheikh 是的，那会很棒。
好的，只是分享...
检查我的答案。我修改了你的文件

标签： java ajax servlets

【解决方案1】：

您必须使用 AJAX。 Servlet 请求可以是同步的，这意味着它将等到处理完成然后执行下一个活动。使用 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 也会隐藏。

类似的问题： Show "loading" animation on button click

【讨论】：

【解决方案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>

【讨论】：