js刷新整个页面 js局部刷新当前页面( 二 ) _生活百科

提交
</button>
<span id="tip"> </span>
</div>
</div>
</div>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200317211240162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aml6ZQ==,size_16,color_FFFFFF,t_70)
## 二、th:fragment代码段
fragment代码段，可以用jquery局部刷新
```javascript

<div class="statList" th:fragment="statList" id="statList">
<div class="col-lg-12 col-md-12 col- *** -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);
}
```
【js刷新整个页面 js局部刷新当前页面】老伍，2020.3.17

js刷新整个页面 js局部刷新当前页面( 二 )

秒懂生活扩展阅读