Java 如何在单击任意按钮时显示正在加载的gif
我想在servlet繁忙时显示加载gif。在我的jsp页面中，我有4个按钮。若用户单击任何按钮，则必须显示加载gif。我的html代码是这样的Java 如何在单击任意按钮时显示正在加载的gif,java,ajax,servlets,Java,Ajax,Servlets,我想在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-8
<%@ 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>
TEC报告
请插入销售订单并单击按钮
PDM报告
1号门报告
SB72-0408报告
店铺参观报告
我应该使用ajax还是servlet post？您必须使用ajax。Servlet请求可以是同步的，这意味着它将等待处理完成，然后执行下一个活动。使用AJAX请求，您可以发送请求，然后执行其他操作，而不必等待它完成处理，因为它是异步的 将加载的gif图像添加到html并将其隐藏（现在使用html本身的样式，您可以将其添加到单独的CSS中）：
单击按钮时显示图像，并在成功功能时再次隐藏
$（'#buttonID'）。单击（函数（）{
$（“#img”）.show（）；//您必须使用AJAX。Servlet请求可以是同步的，这意味着它将等待处理完成，然后执行下一个活动。使用AJAX请求，您可以发送请求，然后执行其他操作，而无需等待它完成处理，因为它是异步的
将加载的gif图像添加到html并将其隐藏（现在使用html本身的样式，您可以将其添加到单独的CSS中）：
单击按钮时显示图像，并在成功功能时再次隐藏
$（'#buttonID'）。单击（函数（）{
$（'#img'）.show（）；//这是您修改过的文件
步骤：
只需更改您的img URL，因为我已更改为加载实时图像
删除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>
TEC报告
装载机{
位置：绝对位置；
最高：30%；
左：40%；
显示：无；
}
请插入销售订单并单击按钮
PDM报告
1号门报告
SB72-0408报告
店铺参观报告
$（“#createReport”）.submit（函数（事件）{
$（“img.loaderimg”）.show（）；
event.preventDefault（）；
});
这是您修改过的文件
步骤：
只需更改您的img URL，因为我已更改为加载实时图像
删除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>
TEC报告
装载机{
位置：绝对位置；
最高：30%；
左：40%；
显示：无；
}
请插入销售订单并单击按钮
PDM报告
1号门报告
SB72-0408报告
店铺参观报告
$（“#createReport”）.submit（函数（事件）{
$（“img.loaderimg”）.show（）；
event.preventDefault（）；
});
是的，你也可以使用ajax吗？我应该共享ajax代码来运行gif吗？@AbdulrehmanSheikh是的，那太好了。好的，只是共享…检查我的答案。我已经修改了你的文件是的，你也可以使用ajax吗？我应该共享ajax代码来运行gif吗？@AbdulrehmanSheikh是的，那太好了。好的，只是共享…检查我的答案。我已经修改了y我们的档案