前台和后台互相传值，主要分为ajax方式和thymleaf跳转页面两种方式。常用的是ajax异步刷新页面方式。
一 ajax异步刷新前后台传值方式
1. 案例：前台ajax表单post方式提交id，从数据库获取数据显示到前台
（1）memberSearch.html页面及ajax提交，并解析json数据显示到前提
<body>
<div>
<label>ID</label>
<input name="id" id="id" type="text" >
<button type="submit" onclick="searchMember()">搜索</button>
</div>
<div>
<p>姓名：<span id="name">---</span></p>
<p>性别：<span id="sex">---</span></p>
<p>手机号：<span id="telephone">---</span></p>
</div>
<script>
function searchMember() {
var id = $("#id").val();
$.ajax({
url: "searchById",
method: "post",
data: {
memberId: id
},
dataType: "json",
success: function(data) {
if (data.status == "success") {
$("#name").html(data.member.name);
$("#sex").html(data.member.sex);
$("#telephone").html(data.member.telephone);
}
},
error: function(data) {
alert("wrong");
}
});
}
</script>
</body>（2）后台从数据库获取到值，通过json格式传递给前台
@ResponseBody
@PostMapping("searchById")
public String getMemberById(@RequestParam("memberId") Integer memberId)
{
System.out.println(memberId);
Member member=memberService.getMemberById(memberId);
JSONObject result = new JSONObject();
if(member!=null) {
System.out.println(member.getName());
result.put("status", "success");
result.put("member", member);
}
else
{ result.put("status", "fail");
}
return result.toJSONString();
}2.前台通过ajax将参数get传递给后台
（1）本例是bootstrapTable通过参数的get方式传递
$('#rightTable').bootstrapTable({
url: "findUsersByRoleId",
contentType : "application/x-www-form-urlencoded",
method:"get",
//请求后台的URL（*）
dataType: "json",
pagination: false,
queryParamsType:'',
queryParams : function(e) {
var param = {
roleId : $("#roleId").val()
};
return param;
},
autoSelectFirstRow: false,
clickToSelect: true,
columns:[
{
checkbox: true
}, {
title : '姓名',
field : 'username',
align : 'center',
}, {
title : '工号',
field : 'employeeNum',
align : 'center'
}, {
title : '部门',
field : 'department',
align : 'center'
}
],
uniqueId:'employeeNum'
});（2）后台通过参数接收，需要加@ReponseBody
//根据角色查找用户
@ResponseBody
@RequestMapping("/findUsersByRoleId")
public String searchRoleUser(String roleId) {
Integer roleIdInt=Integer.parseInt(roleId);
List<User> userList=roleSerivce.findUsersByRoleId(roleIdInt);
System.out.println("userList.size()==="+userList.size());
int total = (int) userList.size();
for(int i=0;i<userList.size();i++)
System.out.println(userList.get(i).getEmployeeNum());
JSONObject result = new JSONObject();
result.put("rows",userList);
result.put("total",total);
return result.toJSONString();
}3.前台通过ajax将参数post传递给后台
（1）前台将参数通过post传递
function searchLRoleUsers() {
var name = $('#name').val();
var num = $('#num').val();
var depart = $('#depart').val();
$.ajax({
type: "post",
url: "searchLRoleUsers",
data: {
name: name,
num: num,
depart:depart
},
dataType: "json",
success: function(json) {
$("#leftTable").bootstrapTable('load', json); //主要是要这种写法
}
});
}（2）后台通过request接收
//查找用户
@ResponseBody
@RequestMapping("/searchLRoleUsers")
public String searchLRoleUsers(HttpServletRequest request) {
String name=request.getParameter("name");
String num=request.getParameter("num");
String depart=request.getParameter("depart");
System.out.println("name=="+name+";num=="+num+";depart==="+depart);
List<User> userList=userService.searchRoleUsers(name,num,depart);
int total = (int) userList.size();
JSONObject result = new JSONObject();
result.put("rows",userList);
result.put("total",total);
return result.toJSONString();
}4. （1）前端form提交
<form id="editForm" method="post" class="form-horizontal">
<div class="form-group" style="display:none">
<label for="editId" class="control-label">ID</label>
<input type="id" name="id" class="form-control" id="editId" placeholder="" /> </div>
<div class="form-group">
<label for="inputName" class="control-label">工号</label>
<input type="text" name="employeeNum" class="form-control" id="editNum" placeholder=""/>
</div>
</form>
function updateUser() {
var param = $("#editForm").serializeArray();
//设为disable则无法获取
$.ajax({
url: "editUser",
method: "post",
data: param,
dataType: "json",
success: function(data) {
if (data.state == "success") {
$("#editModal").modal("hide");
document.getElementById("tipContent").innerText = "修改成功";
$("#Tip").modal('show');
$("#bootstrap-table").bootstrapTable('refresh');
}
},
error: function(data) {
alert("wrong");
}
});
}（2）后段类接收
@ResponseBody
@RequestMapping("/editUser")
public String editUserModal(User user)
{
System.out.println("editUserModal");
userService.updateUser(user);
JSONObject result = new JSONObject();
result.put("state", "success");
return result.toJSONString();
}二 thymeleaf页面跳转方式
1.前台form表单get方式提交
（1）前台表单get方式提交, 注意input的name和controller的参数名称一致
<form class="form-auth-small" method="get" action="/doRegister">
<div class="form-group">
<label for="name" class="control-label sr-only">工号</label>
<input type="text" class="form-control" id="employeeNum" name="employeeNum" value="" placeholder="工号">
</div>
<div class="form-group">
<label for="name" class="control-label sr-only">姓名</label>
<input type="text" class="form-control" id="name" name="name" value="" placeholder="姓名">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
</form>（2）后台 @GetMapping("")，多个参数使用@RequestParam("name")接收
@GetMapping("/doRegister")
public String doRegister(@RequestParam("name") String name, @RequestParam("password") String password,Model model) {
User user=new User();
user.setUsername(name);
...
userService.insertUser(user);
model.addAttribute("msg", "注册成功");
System.out.println("注册成功");
return "registerInfo";
}（3）通过model返回给前台registerInfo.html
<p class="contentCenter"><span th:text="${msg}" style="color:red"></span></p>2.前台form表单post方式提交
（1）前台post方式
<form class="form-auth-small" method="post" action="/doRegister">
<div class="form-group">
<label for="name" class="control-label sr-only">工号</label>
<input type="text" class="form-control" id="employeeNum" name="employeeNum" value="" placeholder="工号">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
</form>（2）后台 @PostMapping("")，多个参数使用@RequestParam("name")接收
@PostMapping("/doRegister")
public String doRegister(@RequestParam("name") String name, @RequestParam("password") String password,Model model) {
User user=new User();
user.setUsername(name);
...
userService.insertUser(user);
model.addAttribute("msg", "注册成功");
System.out.println("注册成功");
return "registerInfo";
}3.前台get带参数传给后台
（1）前台地址加参数
<div class="modal-body">
<iframe id="selectRole" src="roleUsers?roleId=" style="width:870px;height:460px;">
</iframe>
</div>
<script>
...
document.getElementById("selectRole").src="roleUsers?roleId="+row.id;
$("#userAssignModal").modal('show');
</script>（2）后台controller通过RequestParam接收
@GetMapping("roleUsers")
public String getRoleUsers(Model model,@RequestParam("roleId") String roleId) {
System.out.println("roleId==="+roleId);
model.addAttribute("roleId", roleId);
return "role/roleUsers";
}4. 后台给Model存值传给前台thymeleaf
（1）后台将值存放到Model
@GetMapping("roleUsers")
public String getRoleUsers(Model model,@RequestParam("roleId") String roleId) {
System.out.println("roleId==="+roleId);
model.addAttribute("roleId", roleId);
return "role/roleUsers";
}（2）前台通过thymeleaf的th:value接收
<input id="roleId" type="hidden" th:value="${roleId}">
4552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
