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>