写一个 jsp页面中点击查询统计按钮时会弹出一个录入模块(使用layui弹出框),模块的内容包含: 查询时间、查询内容、查询原因、查询人、显示数字证书信息, 登记完成后显示查询统计模块的操作,
时间: 2024-01-12 21:02:20 浏览: 108
jsp页面同时弹出页面和对话框
4星 · 用户满意度95%
好的,以下是一个简单的实现方式:
1. 在JSP页面中添加一个查询统计按钮,并添加点击事件,点击事件触发弹出框。
```
<button id="queryBtn" class="layui-btn">查询统计</button>
<script>
$("#queryBtn").on("click", function () {
// 弹出录入模块
layer.open({
type: 1,
title: "录入查询记录",
area: ["500px", "400px"],
content: $("#queryBox")
});
});
</script>
```
2. 在页面中添加一个隐藏的div,用于存放录入模块的内容。
```
<div id="queryBox" style="display: none;">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">查询时间</label>
<div class="layui-input-block">
<input type="text" name="queryTime" id="queryTime" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">查询内容</label>
<div class="layui-input-block">
<input type="text" name="queryContent" id="queryContent" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">查询原因</label>
<div class="layui-input-block">
<input type="text" name="queryReason" id="queryReason" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">查询人</label>
<div class="layui-input-block">
<input type="text" name="queryUser" id="queryUser" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数字证书信息</label>
<div class="layui-input-block">
<textarea name="certInfo" id="certInfo" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="submitBtn">提交</button>
</div>
</div>
</form>
</div>
```
3. 在JavaScript中添加提交事件,将录入的查询记录发送到后台保存,并在弹出框中显示查询统计模块的操作。
```
// 点击提交按钮
$("#submitBtn").on("click", function () {
// 获取录入的查询记录
var queryTime = $("#queryTime").val();
var queryContent = $("#queryContent").val();
var queryReason = $("#queryReason").val();
var queryUser = $("#queryUser").val();
var certInfo = $("#certInfo").val();
// 发送请求保存查询记录
$.ajax({
url: "/saveQueryRecord",
type: "post",
data: {
queryTime: queryTime,
queryContent: queryContent,
queryReason: queryReason,
queryUser: queryUser,
certInfo: certInfo
},
success: function (data) {
if (data.code == 0) {
// 保存成功,显示查询统计模块的操作
$("#queryBox").html("查询统计模块的操作");
} else {
// 保存失败,提示用户
layer.msg(data.msg);
}
},
error: function () {
layer.msg("系统错误,请稍后重试");
}
});
});
```
以上是一个简单的实现方式,具体实现还需要根据具体需求进行调整。
阅读全文