1
我已經啓動了一個也使用JQuery的Spring MVC應用程序。我只是在研究用戶管理的細節，並且已經完成了大部分工作，但我在頁面上遇到了一些困難，允許編輯用戶數據。頁面上有兩種形式。第一個允許管理員選擇要編輯的用戶。它正確地進行了一次Ajax調用，用該用戶的數據填充第二個表單。當提交第二個表單時，默認（空）對象返回到後端。未在POST中發送表單數據
當我在postUser方法中檢查selectedUser或Model的值時，該對象是一個默認（空）的對象。在提交之前，我沒有看到jsp中填充的數據。 這裏是接收POST，我完全jsp和後臺方法：
<%@ 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);
}
在repsonse到爪牙的問題，這裏是價值的片段在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="[email protected]"/></td> </tr>
'event.preventDefault（）;'需要一個名爲'event'說法，你有說法'e' – charlietfl 2015-02-17 23:29:42
有什麼用'
TRGWII
2015-02-18 00:15:47
如果問題出在客戶端代碼上，我們可以用它來代替嗎？ – TRGWII 2015-02-18 00:16:54