对不起,我无法分享我的代码。 我会尝试为我的情况提供一个恰当的例子。
班级人员:
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"); }); }我的控制器方法:
@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; }在这里,我能够正确地检索人数,但整个问题是人员列表。 总是空的......
I am sorry that I cannot share my code. I will try to give an appropriate example for my situation.
Class Person:
public class Community { private int personCount; private List<Person> persons; //getters and setters for all }Call Person:
public class Person { private int name; private int age; //getters and setters }Now, I want to serialize and send a form with an AJAX call from my JSP. In JSP, I used
<div th:each="parameter,iterStat : ${persons}" class="personsContainer"> <div th:text="'Name: ' + ${parameter.name}"></div> ...to traverse through the list.
This is the AJAX call
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"); }); }My controller method:
@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; }Here, I am able to retrieve the person count correctly but the whole issue is with the list of Persons. It is null always...
最满意答案
您的人员列表始终为null因为jQuery的serialize()函数仅考虑表单元素。 从官方文档 :
描述:将一组表单元素编码为字符串以进行提交。
.serialize()方法以标准URL编码表示法创建文本字符串。 它可以作用于已选择单个表单控件的jQuery对象,例如<input> , <textarea>和<select> : $( "input, textarea, select" ).serialize();
但是,通常更容易选择<form>本身进行序列化
例如,如果您有一个<select multiple>元素并将名称列为选项,则serialize函数将正确序列化所有选定的<option>元素:
<form> <select multiple th:each="parameter,iterStat : ${persons}" class="personsContainer"> <option selected th:text="'Name: ' + ${parameter.name}"></option> </select> </form>这是一个有效的例子 。
编辑
要从表单参数或查询字符串中自动填写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>此外,如果您要使用serialize()则应将ajax的dataType设置为application/x-www-form-urlencoded 。
Your list of persons is always null because the jQuery's serialize() function takes into account only form elements. From the 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
For example, if you had a <select multiple> element and listed the names as options, the serialize function would correctly serialize all selected <option> elements:
<form> <select multiple th:each="parameter,iterStat : ${persons}" class="personsContainer"> <option selected th:text="'Name: ' + ${parameter.name}"></option> </select> </form>Here is a working example.
Edit
To automatically fill in the persons list from the form parameters or the query string it will need to be in the following format:
personCount=2&persons[0].name=joe&persons[0].age=20&persons[1].name=john&persons[1].age=25`This means your form should look something like this:
<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>Also, the ajax's dataType should be set to application/x-www-form-urlencoded if you're going to use serialize().
更多推荐
发布评论