我想在我的 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。 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
关于java - 单击任何按钮时如何显示正在加载的 gif，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59487057/