写一个:在jsp页面点击查询后弹出layUI小框进行姓名等各项信息输入,自动获取系统时间和当前用户 信息输出到小框中,按钮为取消和确定或者保存,确定后跳转查询页面,保存输入信息
时间: 2024-02-01 10:14:09 浏览: 36
以下是一个简单的实现jsp页面点击查询后弹出layUI小框进行信息输入的示例:
1. 在jsp页面中引入layUI的相关css和js文件
```html
<!--layUI css-->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<!--layUI js-->
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.js"></script>
```
2. 在jsp页面中添加一个查询按钮,点击后弹出layUI小框
```html
<button class="layui-btn layui-btn-normal" onclick="showInputBox()">查询</button>
```
3. 在jsp页面中添加一个隐藏的div作为layUI小框的容器
```html
<div id="inputBox" style="display: none;">
<!--小框内容-->
</div>
```
4. 在jsp页面中添加一个JavaScript函数用于显示layUI小框并获取系统时间和当前用户信息
```javascript
function showInputBox() {
// 弹出layUI小框
layui.use(['layer'], function() {
var layer = layui.layer;
layer.open({
type: 1,
title: '请输入查询条件',
content: $('#inputBox'),
area: ['500px', '300px'],
btn: ['取消', '确定'],
yes: function(index, layero) {
// 点击取消按钮
layer.close(index);
},
btn2: function(index, layero) {
// 点击确定按钮
var name = $('#name').val(); // 获取姓名输入框的值
var time = new Date().toLocaleString(); // 获取当前时间
var user = '<%= request.getRemoteUser() %>'; // 获取当前用户信息
// 将姓名、时间和用户信息输出到小框中
$('#output').html('姓名:' + name + '<br>时间:' + time + '<br>用户:' + user);
// 保存输入信息
$.ajax({
type: 'POST',
url: 'saveInfo.jsp',
data: {'name': name, 'time': time, 'user': user},
success: function(data) {
// 保存成功后跳转查询页面
window.location.href = 'query.jsp';
},
error: function(xhr, textStatus, errorThrown) {
alert('保存失败:' + errorThrown);
}
});
// 关闭layUI小框
layer.close(index);
// 阻止默认事件和冒泡
return false;
}
});
});
}
```
5. 在小框内容中添加姓名等各项信息输入框和输出框
```html
<div class="layui-form-item">
<label class="layui-form-label">姓名:</label>
<div class="layui-input-inline">
<input type="text" id="name" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">时间:</label>
<div class="layui-input-inline">
<input type="text" id="time" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户:</label>
<div class="layui-input-inline">
<input type="text" id="user" class="layui-input" disabled>
</div>
</div>
<div id="output"></div>
```
6. 在保存输入信息的jsp页面(saveInfo.jsp)中获取输入参数并保存到数据库或文件中
```jsp
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String time = request.getParameter("time");
String user = request.getParameter("user");
// TODO: 将输入信息保存到数据库或文件中
%>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)