Thyemlef动态刷新页面方法
最近在做项目,后端使用SSM架构,前端使用thymeleaf和bootstrap架构,在作用过程中,需要页面局部刷新,用到了3种方法,分别进行一下介绍。
一、bootstrap模态框
在管理员界面对员工进行修改时,一般都展示出清单,管理员可以在清单上对员工进行修改或其它操作,在本程序中,用到了添加员工、编辑员工信息,都采用弹出模态框的方法。
实现的代码如下:
1、按钮功能实现
添加与编辑用户按钮,指出模态框,并在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从后台获取数据,并显示模态框上。
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