Thyemlef動態刷新頁面方法
最近在做項目,后端使用SSM架構,前端使用thymeleaf和bootstrap架構,在作用過程中,需要頁面局部刷新,用到了3種方法,分別進行一下介紹。
## 一、bootstrap模態框
在管理員界面對員工進行修改時,一般都展示出清單,管理員可以在清單上對員工進行修改或其它操作,在本程序中,用到了添加員工、編輯員工信息,都采用彈出模態框的方法。

實現的代碼如下:
1、按鈕功能實現
```javascript
添加與編輯用戶按鈕,指出模態框,并在jquery也沒有函數中對輸入框賦值。
<input type="button" value="添加用戶" data-toggle="modal" data-target="#addUserModal" class="btn btn-info" style="margin-left: 10px"/>
編輯按鈕中,還需要將對象參數傳遞進去,以便修改正確的人員
<div class="btn btn-default btn-group-xs" role="group" aria-label="修改"
th:id="${'user-modify-'+record.id}"
th:edit-data-id="${record.id}"
data-toggle="modal" data-target="#addUserModal"
onclick="return get_employee_info(this)">編輯
</div>
```
2、JQERY函數實現
函數中根據按鈕參數,通過ajax從后臺獲取數據,并顯示模態框上。
```javascript
function get_employee_info(e) {
var id = e.getAttribute("edit-data-id");
if (!id) {
alert('Error!');
return false;
}
$.ajax(
{
url: "/getEmployee",
data: {"id": id},
type: "get",
beforeSend: function () {
//$("#tip").html("<span style='color:blue'>正在處理...</span>");
return true;
},
success: function (data) {
if (data) {
// 解析json數據
var data_obj = data;
// 賦值
$("#id").val(data_obj.id);
$("#name").val(data_obj.name);
$("#department").val(data_obj.department);
$("#section").val(data_obj.section);
$("#cardId").val(data_obj.cardId);
$("#mobilePhone").val(data_obj.mobilePhone);
$("#managerLevel").val(data_obj.managerLevel);
$("#company").val(data_obj.company);
$("#manageDepartment").val(data_obj.manageDepartment);
} else {
$("#tip").html("<span style='color:red'>失敗,請重試</span>");
// alert('操作失敗');
}
},
error: function () {
alert('請求出錯');
},
complete: function () {
// $('#tips').hide();
}
});
return false;
}
```
3、模態框實現代碼
```javascript
<!-- 模態框示例(Modal1) -->
<form method="post" action="" class="form-horizontal" role="form" id="employee" onsubmit="return edit_employee()"
style="margin: 10px;">
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
用戶信息
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="id" class="col-sm-3 control-label">用戶ID</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="id" name="id" readonly>
</div>
</div>
<div class="form-group">
</div>
***。。。中間省略其它字段。。。***
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" style="margin-left: 200px">
關閉
</button>
<button type="submit" class="btn btn-primary" >
提交
</button>
<span id="tip"> </span>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
```

## 二、th:fragment代碼段
fragment代碼段,可以用jquery局部刷新
```javascript
<!--明細清單,做成點南上面圖標時局部刷新-->
<div class="statList" th:fragment="statList" id="statList">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<table class="table table-bordered table-hover table-responsive">
<thead>
...省略其它代碼。
</div>
```
下面是更新代碼, 上面代碼段名稱為: $(".statList").html(data);,下面函數是統計圖標的點擊后,觸發查詢功能,對統計圖表的數據進行下鉆查詢。功能是通過ajax獲取后端數據,然后在前端顯示。
```javascript
function refreshStatList(codeColor) {
var department = $('#departmentList').val();
$.ajax({
type: "post",
async: true,
url: "/statQueryList",
data: {
"department": department,
"codeColor": codeColor
},
success: function (data) {
$(".statList").html(data);
//將選擇值保存到而面,供導出時使用
$("#selectCodeColor").val(codeColor);
},
error: function (errorMsg) {
//請求失敗時執行該函數
alert("局部刷新失敗!");
}
})
}
```
## 三、ajax局部刷新
利用jquery函數,利用ajax需要時從后臺獲取數據,然后通過前端對象名,對相應內容賦值,實現局部刷新。
```objectivec
$("#tip").html("<span style='color:blue'>正在處理...</span>");
//給日期字段賦值,只能取前面年月日,并以-號分隔,否則前端不回顯
if (data_obj.quarantineStart != null) {
$("#quarantineStart").val(data_obj.quarantineStart.substring(0, 10));
} else {
$("#quarantineStart").val(null);
}
```
老伍,2020.3.17
在Javaweb的前端開發中,刷新網頁實在是太常用了,有的時候我們刪除表格中的一行數據可以刷新一下網頁。更新一段數據之后刷新一下頁面。
有的人可能會講刪除或者更新數據,用不著刷新。。其實我就是舉了個例子而已啦~
Javaweb技術分享
location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
location.reload(false)
好美的妹子。嘿嘿
由于上傳圖片大小有限制,所以只能制作這樣的動態圖,實際效果應該會比這流暢很多!
點擊圖片看效果
點擊圖片查看效果
包括了常規的表單參數項,比如用戶名、密碼、Email電子郵件、年齡等的無刷新輸入提示和驗證功能,當用戶輸入完一個文本框后,立即顯示驗證結果,并給出提示,適時提示,相比傳統的彈出框提示,操作體驗更好。有興趣的朋友可以跟著做一下也能增強自己的動手能力,能在面試中工作中能有更好的表現。個人認為去網頁上摳別人的代碼,總覺得不怎么光彩,還是只有自己學好了,什么都能自己寫出來,這樣我認為才是真正的學好了。有很多轉行,新手,學生剛剛接觸前端的朋友和剛剛開始學習javascript的都可以加下我的javascript進階群:547931294,大家都能一起交流學習心得,群里也有很多資料,以及源碼跟大家分享。如果選擇遠方便只顧風雨兼程!
如果有正在學習前端,不知道怎么學習,學習效率不高或者不知道行業前景,就業前景的也可以來一下我們頭條前端群477149581,有大神,有小白,每晚都會分享一些企業級的知識和面試技巧。
源碼解析分享:
源碼請關注后,私信“源碼”
源碼請關注后,私信“源碼”
我一直認為堅持下去總能做好一件事,事實也是這個結果,堅持到最后的人都是成功者。
如果有正在學習前端javascript的伙伴,不知道怎么學習,或者學習些什么才能找到工作的可以一起來我們的頭條前端群477149581,一整套前端學習路線及系統學習資料已上傳群文件!
頭條號里有許多web前端學習視頻/源碼,企業常用特效/案例/項目,敬請關注
*請認真填寫需求信息,我們會在24小時內與您取得聯系。