共计 4595 个字符，预计需要花费 12 分钟才能阅读完成。
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>正文完