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