1
Я начал приложение Spring MVC, которое также использует JQuery. Я просто разрабатываю детали управления пользователями и прохожу большую часть пути, но у меня есть небольшая проблема на странице, которая позволяет редактировать пользовательские данные. На странице есть две формы. Первый позволяет администратору выбирать пользователя для редактирования. Он правильно делает вызов Ajax, который заполняет вторую форму данными этого пользователя. Когда вторая форма отправляется, по умолчанию (пустой) объект возвращается в конец.Данные формы не отправляются в POST
Когда я исследую значение selectedUser или Model в методе postUser, объект является по умолчанию (пустым). Я не вижу данные, которые были заполнены в 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);
}
В 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', то есть аргумент' é' – charlietfl
Что с '<форма: форма'? – TRGWII
Если проблема связана с клиентским кодом, можем ли мы использовать это вместо этого? – TRGWII