1活動html
html頁面~~~~javascript
<!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>
相關文章
- 1. html動畫（1）大白
- 2. 【html】html教程1
- 3. 1、HTML
- 4. HTML 1
- 5. html 1
- 6. HTML-1
- 7. 大二寒假計劃——1.Android活動
- 8. HTML筆記1—HTML基礎
- 9. HTML詳解（1.html簡介）
- 10. HTML框架1
- 更多相關文章...
- • W3C HTML 活動 - W3C 教程
- • W3C XQuery 活動 - W3C 教程
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. html動畫（1）大白
- 2. 【html】html教程1
- 3. 1、HTML
- 4. HTML 1
- 5. html 1
- 6. HTML-1
- 7. 大二寒假計劃——1.Android活動
- 8. HTML筆記1—HTML基礎
- 9. HTML詳解（1.html簡介）
- 10. HTML框架1