|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型为HTML，字符编码为UTF-8 -->
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- 定义文档类型为HTML 4.01 Transitional -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 设置页面内容类型和字符编码 -->
|
|
|
<title>Insert title here</title> <!-- 页面标题 -->
|
|
|
<link rel="stylesheet" href="../public/layui/css/layui.css"> <!-- 引入Layui的CSS样式文件 -->
|
|
|
</head>
|
|
|
<body>
|
|
|
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter"> <!-- 创建一个表单，使用Layui的表单类和过滤器 -->
|
|
|
<div class="layui-form-item"> <!-- 表单项开始 -->
|
|
|
<label class="layui-form-label">标题</label> <!-- 标签显示“标题” -->
|
|
|
<div class="layui-input-block"> <!-- 输入块开始 -->
|
|
|
<input type="text" name="title" lay-verify="required" required autocomplete="off" placeholder="请输入标题" class="layui-input"> <!-- 文本输入框，必填，自动完成关闭，占位符为“请输入标题” -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item" style="height:50%;"> <!-- 表单项开始，高度为50% -->
|
|
|
<label class="layui-form-label">公告</label> <!-- 标签显示“公告” -->
|
|
|
<div class="layui-input-block"> <!-- 输入块开始 -->
|
|
|
<textarea name="detail" lay-verify="required" placeholder="请输入公告" autocomplete="off" class="layui-input" style="height:300px;"></textarea> <!-- 多行文本输入框，必填，自动完成关闭，占位符为“请输入公告”，高度为300px -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item"> <!-- 表单项开始 -->
|
|
|
<div class="layui-input-block"> <!-- 输入块开始 -->
|
|
|
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton"><i class="layui-icon layui-icon-release" style="font-size: 20px; color: yellow;"></i> 发布</button> <!-- 提交按钮，使用Layui的按钮类和图标类，点击后触发提交事件 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
<script>
|
|
|
layui.use(['form', 'jquery'], function(){ // 使用Layui的form和jQuery模块
|
|
|
$ = layui.jquery; // 获取jQuery对象
|
|
|
var form = layui.form // 获取form对象
|
|
|
,layer = layui.layer // 获取layer对象
|
|
|
//监听提交
|
|
|
form.on('submit(submitButton)', function(data){ // 监听表单提交事件
|
|
|
$.ajax({ // 发起Ajax请求
|
|
|
url: './announcementAdd', // 请求URL
|
|
|
method: 'post', // 请求方法为POST
|
|
|
data: data.field, // 请求数据为表单数据
|
|
|
dataType: 'json', // 期望服务器返回的数据类型为JSON
|
|
|
success: function(data){ // 请求成功时的回调函数
|
|
|
if(data.code == "0"){ // 如果返回码为0，表示成功
|
|
|
parent.layer.msg("添加成功",{ // 弹出提示信息“添加成功”
|
|
|
icon: 6, // 图标类型为笑脸
|
|
|
time: 500 // 显示时间为500毫秒
|
|
|
});
|
|
|
setTimeout(function(){ // 设置延时操作
|
|
|
parent.location.reload(); // 刷新父页面
|
|
|
}, 500); // 延时500毫秒后执行
|
|
|
}else{ // 如果返回码不为0，表示失败
|
|
|
layer.msg(data.msg); // 弹出错误信息
|
|
|
}
|
|
|
|
|
|
}
|
|
|
})
|
|
|
|
|
|
return false; // 阻止表单默认提交行为
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
