我已经启动了一个也使用JQuery的Spring MVC应用程序。我只是弄清楚了用户管理的细节,并且已经完成了大部分工作,但我在允许编辑用户数据的页面上遇到了一些困难。页面上有两种形式。第一个允许管理员选择要编辑的用户。它正确地进行Ajax调用,用该用户的数据填充第二个表单。提交第二个表单时,会将默认(空)对象返回到后端。
当我在postUser方法中检查selectedUser或Model的值时,该对象是默认(空)对象。在提交之前,我没有看到jsp中填充的数据。 这是我的完整jsp和接收POST的后端方法:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Update roles</title>
<%@ page isELIgnored="false"%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
// This is just a placeholder for now. I might want to preprocess some data
// before submitting.
$("#updateUserForm").submit(function(event) {
alert("selectedUser.username=" + $('[name="username"]').val());
});
// This is for selecting a user from the list and then populating
// the other form with it.
$("#selectUserForm").submit(function(event) {
//get the form data and then serialize that
dataString = $("#selectUserForm").serialize();
//get the form data using another method
var userId = $("#userSelect").val();
//make the AJAX request, dataType is set to json
//meaning we are expecting JSON data in response from the server
$.ajax({
type : "GET",
url : "getUser/" + userId,
//if received a response from the server
success : function(data, textStatus, jqXHR) {
$('body').empty();
$('body').html(data);
},
//If there was no resonse from the server
error : function(jqXHR, textStatus, errorThrown) {
alert("error: " + textStatus);
console.log("Something really bad happened " + textStatus);
$("#ajaxResponse").html(jqXHR.responseText);
},
//capture the request before it was sent to server
beforeSend : function(jqXHR, settings) {
//disable the button until we get the response
$('#selectUserBtn').attr("disabled", true);
},
//this is called after the response or error functions are finsihed
//so that we can take some action
complete : function(jqXHR, textStatus) {
//enable the button
$('#selectUserBtn').attr("disabled", false);
}
});
event.preventDefault();
});
});
</script>
<script type="text/javascript">
function addRole() {
alert("in addRole");
}
function removeRole() {
alert("in removeRole");
}
</script>
</head>
<body>
<div>
<h1>Update User</h1>
</div>
<form:form id="selectUserForm" modelAttribute="selectUserData">
<fieldset>
<table>
<tr>
<td><form:select id="userSelect" style="width:125px"
path="userList">
<c:forEach items="${selectUserData.userList}" var="userList">
<option value="${userList.id}">${userList.displayName}</option>
</c:forEach>
</form:select></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" id="selectUserBtn" type="submit"
value="Select User" /></td>
</tr>
</table>
</fieldset>
</form:form>
<hr>
<form:form method="POST" id="updateUserForm" action="updateUser" modelAttribute="selectUserData">
<table>
<tr>
<td><form:label path="selectedUser.username">Username</form:label></td>
<td><form:input name="username" path="selectedUser.username"></form:input></td>
</tr>
<tr>
<td><form:label path="selectedUser.firstName">First Name</form:label></td>
<td><form:input path="selectedUser.firstName"></form:input></td>
</tr>
<tr>
<td><form:label path="selectedUser.lastName">Last Name</form:label></td>
<td><form:input path="selectedUser.lastName"></form:input></td>
</tr>
<tr>
<td><form:label path="selectedUser.password">Password</form:label></td>
<td><form:password path="selectedUser.password"></form:password></td>
</tr>
<tr>
<td><form:label path="selectedUser.email">Email</form:label></td>
<td><form:input path="selectedUser.email"></form:input></td>
</tr>
<tr>
<td><form:label path="selectedUser.authorities">Authorities</form:label></td>
<td>
<table>
<tr>
<td><form:select id="availableRoles" path="availableRoles"
style="width:175px;" multiple="true">
<c:forEach items="${selectUserData.availableRoles}"
var="availableRole">
<option value="${availableRole}">${availableRole}</option>
</c:forEach>
</form:select></td>
<td>
<table>
<tr>
<td><input type="button" id="addRoleBtn" onclick="addRole();" value=">>"></input><br>
<input type="button" id="removeRoleBtn" onclick="removeRole();" value="<<"></input></td>
</tr>
</table>
</td>
<td><form:select id="authorities"
path="selectedUser.authorities" style="width:175px"
multiple="true">
<c:forEach items="${selectUserData.selectedUser.authorities}"
var="authority">
<option value="${authority}">${authority}</option>
</c:forEach>
</form:select></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><form:label path="selectedUser.accountNonExpired">Account non-expired</form:label></td>
<td><form:checkbox path="selectedUser.accountNonExpired"></form:checkbox></td>
</tr>
<tr>
<td><form:label path="selectedUser.accountNonLocked">Account non-locked</form:label></td>
<td><form:checkbox path="selectedUser.accountNonLocked"></form:checkbox></td>
</tr>
<tr>
<td><form:label path="selectedUser.credentialsNonExpired">Credentials non-expired</form:label></td>
<td><form:checkbox path="selectedUser.credentialsNonExpired"></form:checkbox></td>
</tr>
<tr>
<td><form:label path="selectedUser.enabled">Enabled</form:label></td>
<td><form:checkbox path="selectedUser.enabled"></form:checkbox></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" id="updateUserBtn" value="Submit" /></td>
</tr>
</table>
</form:form>
<div id="anotherSection">
<fieldset>
<legend>Response from jQuery Ajax Request</legend>
<div id="ajaxResponse"></div>
</fieldset>
</div>
</body>
</html>
这是我的后端方法:
@Controller
@RequestMapping("/admin")
public class UserAdminController {
...
@RequestMapping(value = "/updateUser", method = RequestMethod.POST)
@Secured({"ADMIN"})
public ModelAndView postUser(@ModelAttribute("selectUserData") User selectedUser, Model model) {
UserData userData = new UserData();
List<Map<String, String>> userList = userService.getUserList();
userData.setUserList(userList);
userData.setSelectedUser((User)model.asMap().get("selectUserData"));
return new ModelAndView("/admin/updateUser", "selectUserData", userData);
}
在回答Minion的问题时,这里是Ajax调用中返回的数据变量值的片段:
<form id="updateUserForm" action="updateUser" method="POST"> <table> <tr> <td><label for="selectedUser.username">Username</label></td> <td><input id="selectedUser.username" name="selectedUser.username" type="text" value="user"/></td> </tr> <tr> <td><label for="selectedUser.firstName">First Name</label></td> <td><input id="selectedUser.firstName" name="selectedUser.firstName" type="text" value="user"/></td> </tr> <tr> <td><label for="selectedUser.lastName">Last Name</label></td> <td><input id="selectedUser.lastName" name="selectedUser.lastName" type="text" value=""/></td> </tr> <tr> <td><label for="selectedUser.password">Password</label></td> <td><input id="selectedUser.password" name="selectedUser.password" type="password" value=""/></td> </tr> <tr> <td><label for="selectedUser.email">Email</label></td> <td><input id="selectedUser.email" name="selectedUser.email" type="text" value="dm_tim@yahoo.com"/></td> </tr>
答案 0 :(得分:1)
问题的根本原因是输入路径变量的声明方式。
<tr>
<td><form:label path="selectedUser.firstName">First Name</form:label></td>
<td><form:input path="selectedUser.firstName"></form:input></td>
</tr>
您不必提及selectedUser,因为Spring知道如何绑定数据。 Spring可以将值绑定到模型属性的属性。如果它找不到任何东西,它就会忽略它们。因此,你总是得到空对象,因为Spring将实例化新对象。
<tr>
<td><form:label path="firstName">First Name</form:label></td>
<td><form:input path="firstName"></form:input></td>
</tr>