写一个:在jsp页面点击查询后弹出layUI小框进行姓名等各项信息输入,自动获取系统时间和当前用户 信息输出到小框中,按钮为取消和确定或者保存,确定后跳转查询页面,保存输入信息
时间: 2024-02-01 12:13:00 浏览: 86
以下是一个简单的实现示例:
在jsp页面中,添加一个查询按钮和一个隐藏的弹窗div:
```
<button class="layui-btn" id="searchBtn">查询</button>
<div id="popup" style="display:none;">
<form class="layui-form" action="saveInfo.jsp">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" 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="time" readonly class="layui-input" id="time">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">当前用户</label>
<div class="layui-input-block">
<input type="text" name="user" readonly class="layui-input" value="<%=session.getAttribute("username")%>">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="saveInfo">保存</button>
<button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
</div>
</div>
</form>
</div>
```
在页面底部引入layUI和jQuery:
```
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>
```
在页面底部添加以下脚本:
```
<script>
// 点击查询按钮,显示弹窗
$("#searchBtn").click(function() {
// 自动填充系统时间
var now = new Date();
var timeStr = now.getFullYear() + "-" + (now.getMonth()+1) + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
$("#time").val(timeStr);
layer.open({
type: 1,
title: "输入信息",
content: $("#popup"),
area: ["500px", "300px"]
});
});
// 点击取消按钮,关闭弹窗
$("#cancelBtn").click(function() {
layer.closeAll();
});
</script>
```
在saveInfo.jsp中,获取表单数据并保存到数据库中,然后跳转回查询页面:
```
<%
String name = request.getParameter("name");
String time = request.getParameter("time");
String user = request.getParameter("user");
// TODO: 将数据保存到数据库中
response.sendRedirect("search.jsp");
%>
```
阅读全文