多个表单，一个保存调用和多个具有相同名称的输入元素答案

【问题标题】：Multiple Forms, One save call and multiple input elements with same name多个表单，一个保存调用和多个具有相同名称的输入元素
【发布时间】：2014-04-08 14:42:05
【问题描述】：

场景：- 我有一个 jsp（比如 A），其中包含了更多的 jsp（比如 P、Q、R、S）。在 P、Q、R 和 S 中，我分别创建了一种形式。在点击主保存按钮时，我正在发送一个 ajax 请求，其中我正在序列化所有 4 种形式（jsps P、Q、R、S），然后在 ajax 的数据中发送这个序列化的内容。在控制器上，我正在我的对象中检索这个序列化的表单内容，比如 p,q,r,s。

实际问题：- 在所有 4 个表单中，我都有一个单独的 commandName，但在每个表单中，我都维护一个名为“id”的隐藏输入元素。在从控制台看到 firebug 中的 ajax 请求时，所有的 id 都被绝对正确地发布（因为它们分别是 P、Q、R、S 形式的 1101、1102、1103、1104）但是当它到达我的控制器时所有对象（p，q，r，s）中包含的 id 相同（P，Q，R 和 S 为 1101）。找不到这个的原因。任何帮助表示赞赏..

<form:form id="A" commandName="objectA">
   <input type="hidden" name="id" value="1101" />
</form:form>

<form:form id="B" commandName="objectB">
   <input type="hidden" name="id" value="1102" />
</form:form>

<form:form id="C" commandName="objectC">
   <input type="hidden" name="id" value="1103" />
</form:form>

<form:form id="D" commandName="objectD">
   <input type="hidden" name="id" value="1104" />
</form:form>

然后在我的 ajax 请求中，我将数据发送为

url  : "myController/myRequestMapping",
data : $("#A").serialize()+"&"
      +$("#B").serialize()+"&"
      +$("#C").serialize()+"&"
      +$("#D").serialize(),

在控制器上我有这个：

@RequestMapping(value="/myRequestMapping")
public void myFunction(AClass a,BClass b,CClass c,DClass d){
  System.out.println("A's ID is:"+a.getId());    //Prints 1101
  System.out.println("B's ID is:"+b.getId());    //Prints 1101 instead of 1102
  System.out.println("C's ID is:"+c.getId());    //Prints 1101 instead of 1103
  System.out.println("D's ID is:"+d.getId());    //Prints 1101 instead of 1104
}

【问题讨论】：

标签： jquery spring jsp spring-mvc

【解决方案1】：

试试这个：

如果所有表单具有相同的输入元素，则创建一个 dto 类，如：

public class Form {

    private Long id;

    public Form(){}

        //getters and setters
}

还有一个 AllForms 类来保存所有 Form 实例，例如：

public class AllForms extends ArrayList<Form> {}

然后在js中制作所有表单内容的数组：

var myarray = [
        {id: $('#A').find('input[name="id"]').val()},
        {id: $('#B').find('input[name="id"]').val()},
        {id: $('#C').find('input[name="id"]').val()},
        {id: $('#D').find('input[name="id"]').val()}
        ];

var jsonStr = JSON.stringify(myarray);

然后在 AJAX 请求中执行如下操作：

url  : "myController/myRequestMapping",
data : jsonStr

在控制器中检索如下：

@RequestMapping(value="//myController/myRequestMapping", method=RequestMethod.POST)
public @ResponseBody AllForms process(@RequestBody AllForms allForms){

    System.out.println(allForms);
    return allForms;
}

或者其他选择是：

JS POST 喜欢：

$.post("myController/myRequestMapping",{jsonStr : jsonStr},function(e) {
        console.log('success: '+e);
    }, "json");

和处理方法如：

@RequestMapping(value="/myController/myRequestMapping", method=RequestMethod.POST)
public @ResponseBody String process(@RequestParam String jsonStr){
      System.out.println(jsonStr);

      //convert here Form instance from jsonStr

    return jsonStr;
}

【讨论】：