表单数据未在POST中发送

时间:2015-02-17 22:30:35

标签: jquery spring-mvc

我已经启动了一个也使用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="&gt;&gt"></input><br>
                                        <input type="button" id="removeRoleBtn" onclick="removeRole();" value="&lt;&lt;"></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>

1 个答案:

答案 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>