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