java - 我们可以序列化并发送一个包含主对象内的对象列表的表单 - Ajax、Spring MVC

Question

很抱歉，我无法分享我的代码。我会尽力举一个适合我的情况的例子。

类(class)人员:

    public class Community {

       private int personCount;
       private List<Person> persons;

       //getters and setters for all
   }

调用人:

   public class Person {

       private int name;
       private int age;

       //getters and setters
  }

现在，我想通过 JSP 中的 AJAX 调用序列化并发送表单。在JSP中，我使用了

<div th:each="parameter,iterStat : ${persons}" class="personsContainer">
  <div th:text="'Name: ' + ${parameter.name}"></div>
   ...

遍历列表。

这是 AJAX 调用

   function updateCommunityPeople(initial) {

                var getValuesUrl = /*[[@{/getPeoplesJson}]]*/ "";
                var data = $(".personsContainer").parents('form:first').serialize();

                data += "&initial=" + initial;
                alert("date: "+data);

                $.ajax({
                    'type': "POST",
                    'url': getValuesUrl,
                    'dataType': "json",
                    'data': data,
                })
                .done(function (data, textStatus, jqXHR) {
                    alert("Updated successfully");
                 });
      }

我的 Controller 方法:

     @RequestMapping(value = "/getPeoplesJson", method = RequestMethod.POST)
public @ResponseBody String getCommunityPeopleValuesJson(HttpServletRequest request, HttpSession session,
        Locale locale, Model model, Device device, Principal principal, @Valid Community post,
        BindingResult result)
{
    int count = post.getPersonCount();
    if (post != null && post.getPersons() != null)
    {
        //calls to service and so on...
        return "true";
    }
    return false;
}

在这里，我能够正确检索人数，但整个问题在于人员列表。它始终为空...

Answer 1

您的人员列表始终是 null因为 jQuery 的 serialize()函数仅考虑表单元素。来自official documentation :

Description: Encode a set of form elements as a string for submission.

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>: $( "input, textarea, select" ).serialize();

It is typically easier, however, to select the <form> itself for serialization

例如，如果您有 <select multiple>元素并将名称列为选项，序列化函数将正确序列化所有选定的 <option>元素:

<form>
    <select multiple th:each="parameter,iterStat : ${persons}" class="personsContainer">
        <option selected th:text="'Name: ' + ${parameter.name}"></option>
    </select>
</form>

这是一个working example .

编辑

自动填写persons表单参数或查询字符串中的列表需要采用以下格式:

personCount=2&persons[0].name=joe&persons[0].age=20&persons[1].name=john&persons[1].age=25`

这意味着您的表单应如下所示:

<form>
    <div th:each="parameter,iterStat : ${persons}" class="personsContainer">
        <input type="text" th:value="${parameter.name}" th:name="'people[' + ${iterStat.index} + '].name'">
        <input type="text" th:value="${parameter.age}" th:name="'age[' + ${iterStat.index} + '].age'">
    </div>
</form>

此外，ajax 的 dataType应设置为application/x-www-form-urlencoded如果您要使用 serialize() .