html页面~~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 加这两个标签是为了让移动端的设备优先 -->
<!-- css元素要在head表中添加元素 这个标签是引入bootstrap-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
rel="stylesheet">
<link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<!-- 主元素 -->
<div class="container">
<h1>The hello</h1>
<!-- Button trigger modal -->
<!-- class=bth bth-danger控制按钮的样式（颜色） -->
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#myModal">点击添加</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">都是中国人玩什么洋文</h4>
</div>
<!--表单元素 -->
<div class="modal-body">
<!--如果需要添加多个form表单就要添加单个id的值 -->
<form action="doinsertObject" method="post">
<div class="form-group">
<label for="1exampleInputEmail1">滚滚滚</label> <input type="text"
class="form-control" name="title" id="1exampleInputEmail1"
placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">滚滚驴</label> <select
class="form-control" name="category" id="categoryId">
<option value="training">教育机构</option>
<option value="Playing">随便</option>
</select>
</div>
<div class="form-group">
<label for="2exampleInputEmail1">滚滚狗</label> <input type="text"
autocomplete="off" class="form-control form_datetime" name="startTime" id="2exampleInputEmail1"
placeholder="Email">
</div>
<!-- autocomplete="off" 清楚缓存数据让日期表单直接显示出来-->
<div class="form-group">
<label for="3exampleInputEmail1">滚滚熊</label> <input type="text"
autocomplete="off" class="form-control form_datetime" name="endTime" id="3exampleInputEmail1"
placeholder="Email">
</div>
<div class="form-group">
<lable for="remarkId">备注</lable>
<textarea class="form-control" name="remark" id="remarkId"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary"
onclick="doinsertObject()">确定</button>
</div>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>category</th>
<th>startTime</th>
<th>endTime</th>
<th>remark</th>
<th>state</th>
<th>createdTime</th>
<th>createdUser</th>
</tr>
</thead>
<tbody id="tbodyId">
<!--要把这里的数据清空 掉 换成加载后的数据 -->
<tr>
<td>数据正在积极的加载中</td>
</tr>
</tbody>
</table>
<!-- 主元素 -->
</div>
<script type="text/javascript" src="/jquery.min.js"></script>
<!-- 加载这个插件一定要把他放在jquery引入的下面 -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- 导入日期哪个表格 -->
<script src="/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- 设置日期的格式用什么语言显示 -->
<script src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
//在指定位置初始化datepicker对像
$(".form_datetime").datetimepicker({//通过类选择器获取的值想让哪个时间变在哪个name的class指定。form_datetime
language:"zh-CN",//定义格式
format:"yyyy/mm/dd hh:ii",
autoclose:true
})
//基于此方式提交表单,表单中的元素一定要渔鸥name属性
//并且name属性名的设计一定要与服务端接受参数时的设计相匹配
function doinsertObject(){
//$("form").submit();//提交数据
//1.定义url反正就是使用异步加载最好是
let url="doinsertObject";
//2.定义情趣参数异步传参数方法
var params={
title:$("#1exampleInputEmail1").val(),//为jaqurey中或制定表单元素的value值
category:$("#categoryId").val(),
startTime:$("#2exampleInputEmail1").val(),
endTime:$("#3exampleInputEmail1").val(),
remark:$("#remarkId").val(),
}
//serialize()为jquery中直接获取表单数据方法
//var params=$(#form这个是表单的名字)serialize();
//console.log("params",params);输出一下语句//验证参数的值是否存在
//这个是异步加载最好不要同步加载
//3.发送异步请求
$.ajax({
type:"post",
url:url,
data:params,
success:function(result){
alert(result)//提示框
//隐藏模态框
$("#myModal").modal("hide");
//重行执行查询在调用一次查询方法
a();
}
});
}
//向服务端发送异步请求获取活动信息并更新到页面上
function a(){//如果需要第二次调用就不要使用自调用函数了
let url="doFindActivitys";
let params={};//name=空值
//借助jquery中的ajax函数，向服务器发送异步请求获取活动信息
$.ajax({
url:url,
data:params,
dataType:"json",
success:function(result){
doHandleQueryResult(result);//定义一个方法让下面的定义也可以直接写在这里面
}
});
}//这个括号代表函数调用
a();
//处理服务端返回的活动信息//1迭代result,并将result内容填充tbody位置
function doHandleQueryResult(result){
//1获取tbody对象，并清空原有内容
var tBody=$("#tbodyId")//原生写法document。querySelector("#tbodyId");
tBody.empty();//清空原有的内容
//2迭代result，将活动信息追加到tbody中
result.forEach((item)=>{//这里的item为一个变量，代表数组中的冒个元素
tBody.append(//被替换替换后的数据 append添加新的数据；
`<tr>
<td>${item.id}</td>
<td>${item.title}</td>
<td>${item.category}</td>
<td>${item.startTime}</td>
<td>${item.endTime}</td>
<td>${item.remark}</td>
<td>${item.state==1?"有效":"无效"}</td>
<td>${item.createdTime}</td>
<td>${item.createdUser}</td>
</tr>`
);
});
}
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。