Question

我有两个表单，其中包含具有相同名称的输入的公共操作。首先，我的要求是提交我可以轻松完成的个人表格。然后我需要通过序列化和发送ajax一次提交两个表单。这里的问题是，因为两个表单都包含具有相同名称的输入，所以重复值将通过post传递。我该如何预防？

例如：

$(document).ready(function(){
$("#btn").on("click",function(){
var dataString=$('#form1, #form2').serialize();
$.ajax({
            url: "someOther.jsp",
            dataType: 'json',
            data: dataString,
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
      });
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="some.jsp" method="post" id="form1">
<input type="hidden"  name="hField1" value="value1">
<input type="hidden"  name="hField2" value="value2">
<input type="text" id="field11" name="field11">
<input type="text" id="field21" name="field21">
<input type="submit" value="Save">
</form>

<form action="some.jsp" method="post" id="form2">
<input type="hidden"  name="hField1" value="value1">
<input type="hidden"  name="hField2" value="value2">
<input type="text" id="field12" name="field12">
<input type="text" id="field22" name="field22">
<input type="submit" value="Save">
</form>

<button id="btn">Submit</button>

Answer 1

最简单的解决方案是制作那些数组而不是单个值，如下所示：

<form action="some.jsp" method="post" id="form1">
<input type="hidden" id="hField1" name="hField1[]" value="value1">
<input type="hidden" id="hField2" name="hField2[]" value="value2">
<input type="text" id="field11" name="field11[]">
<input type="text" id="field21" name="field21[]">
<input type="submit" value="Save">
</form>

<form action="some.jsp" method="post" id="form2">
<input type="hidden" id="hField1" name="hField1[]" value="value1">
<input type="hidden" id="hField2" name="hField2[]" value="value2">
<input type="text" id="field12" name="field12[]">
<input type="text" id="field22" name="field22[]">
<input type="submit" value="Save">
</form>

Answer 2

您可以将两种表单数据发送到两个不同的变量中。

    $(document).ready(function(){
      $("#btn").on("click",function(){
      var form1=$('#form1').serialize();
      var form2=$('#form2').serialize();
       $.ajax({
        url: "someOther.jsp",
        dataType: 'json',
        data: {form1:form1,form2:form2},
        success: function (data) {
            console.log(data);
        },
        error: function (data) {
            console.log(data);
        }
  });
 });
});

另一方面，两种形式的数据都不同。

Answer 3

＆＃13;

$(document).ready(function(){
$("#btn").on("click",function(){
$(".neglect").remove();
var dataString=$('#form1, #form2').serialize();
$.ajax({
            type:"POST",
            url: "someOther.jsp",
            dataType: 'json',
            data: dataString,
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
      });
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="some.jsp" method="post" id="form1">
<input type="hidden" name="hField1" value="value1">
<input type="hidden" name="hField2" value="value2">
<input type="text" id="field11" name="field11">
<input type="text" id="field21" name="field21">
<input type="submit" value="Save">
</form>

<form action="some.jsp" method="post" id="form2">
<input type="hidden" class="neglect" name="hField1" value="value1">
<input type="hidden" class="neglect" name="hField2" value="value2">
<input type="text" id="field12" name="field12">
<input type="text" id="field22" name="field22">
<input type="submit" value="Save">
</form>

<button id="btn">Submit</button>

＆＃13;

在序列化和提交两个或多个表单时删除重复的表单输入

3 个答案: