通过ajax post发送附加数据到序列化表单数据之前

Question

使用ajax post方法将表单数据发布到控制器时，我遇到了困难。 以下是我的要求，

域类：

public class Bill implements Serializable{

private String appointmentId;
private long billAmount;
private long paidAmount;
private String discount;
private long dueAmount;
private String modeOfPayment;

List<ServicePackage> packageList =new ArrayList<ServicePackage>();

//Many more fields and their Corresponding getters and setters//

}

这里ServicePackage是另一个Domain类：

public class ServicePackage implements Serializable{


private String packageName;
private String packageCode;
private long packageCost;

//Many other along with the corresponding getters and setters//

}

Jsp代码：当需要用户添加更多行时，还有一些逻辑可以克隆行（以下未包括）。

<f:form class="form" id="packageSection" modelAttribute="package" >

      <div class="row" id="packageDiv">
        <div class="col-sm-12 table-responsive">
            <table class="table table-bordered table-hover" id="packages">
                <thead>
                    <tr><th colspan="7"><h4>Packages</h4></tr><tr>
                    <tr>
                        <th class="text-center">Name</th>
                        <th class="text-center">Code</th>
                        <th class="text-center">Cost</th>
                        <th class="text-center">Discount(%)</th>

                    </tr>
                </thead>
                <tbody>
                    <tr class="packageRow" >
                        <td><select class="form-control input-sm" name="packageNames[0]" onchange="getPackage(0)">
                            <option value="">--select--</option>
                            <c:forEach var="pac" items="${packageList}">
                                <option value="${pac.packageId}">${pac.packageName}</option>
                            </c:forEach>
                        </select></td>
                        <td><input type="text" class="form-control input-sm" disabled="disabled" name="packageCode[0]"> </td>
                        <td><input type="text" class="form-control input-sm" disabled="disabled" name="packageCost[0]"> </td>
                        <td><input type="text" class="form-control input-sm" disabled="disabled" name="packageDiscountPercent[0]"> </td>

                    </tr>

                </tbody>
            </table>
        </div>
      </div>
</f:form>
<f:form class="form" name="billingform" modelAttribute="bill" action="save" id="billForm">

                <div class="col-md-5 col-sm-6 marginTop">
                    <label class="control-label pull-left" for="billAmount">Bill Amount</label>
                </div>
                <div class="col-md-7  col-sm-6 marginTop">
                    <f:input type="number" class="form-control" path="billAmount" name="billAmount" onfocus="calculateTotal()"/>
                </div>

                <div class="clearfix"></div>
                <div class="col-md-5 col-sm-6 marginTop">
                    <label class="control-label" for="amountReceived">Amount Received</label>
                </div>
                <div class="col-md-7 col-sm-6 marginTop">
                    <input type="text" class="form-control" name="amountReceived" onblur="calculateDue()"/>
                </div>

                <div class="clearfix"></div>
                <div class="col-md-5 col-sm-6 marginTop hideToPrint">
                    <label class="control-label hideToPrint" for="toBeReturned">To Be Returned</label>
                </div>
       //And all other necessary fields.
</f:form>

现在，我面临的发布困难是在Java脚本代码内部，如下所示：

$('input#saveButton').on('click', function(e){
        //Getting the package names and adding into a list.
        var rows=$("#packages tbody tr.packageRow").length;
        var packageList= [];
        for(i=0;i<rows;i++){
            var packId=$('[name="packageNames['+i+']"]').val();
            var pack = {"packageId": packId};
            packageList.push(pack);

        }

        packageList = JSON.stringify(packageList); 

        //Form Data of id billForm//                        
        var billData=$('form#billForm').serialize();

        $.ajax({
              type: "POST",
              url: "/LoginMavenSpringMVC/billing/save",
              data: billData,
              success: function(response){
                console.log("Succeeded");
             },
              error: function(e){
              alert('Error: ' + e);
              }
           });

    })

由于packageList与我的主域类Bill关联，所以我应该如何将packageList设置为bill.packageList并发布到控制器。 我的控制器如下：

@RequestMapping(value="/save")
public @ResponseBody String save(@ModelAttribute(value="bill")Bill bill, ModelMap model){

    System.out.println("BillAmount: "+bill.getBillAmount());
    System.out.println("Amount Paid : "+bill.getPaidAmount());
    System.out.println("DueAmount: "+bill.getBillingDate());

    for(ServicePackage pack:bill.getPackageList()){
        System.out.println("Package "+pack.getPackageId());

    }
return "Successfully Executed";
}

任何帮助或建议都会有所帮助。 请帮我解决这个问题。 提前致谢。

Answer 1

$('input#saveButton').on('click', function(e){
    //Getting the package names and adding into a list.
    var rows=$("#packages tbody tr.packageRow").length;
    var packageList= [];
    for(i=0;i<rows;i++){
        var packId=$('[name="packageNames['+i+']"]').val();
        var pack = {"packageId": packId};
        packageList.push(pack);

    }

    packageList = JSON.stringify(packageList); 

    //Form Data of id billForm//                        
    var billData=$('form#billForm').serialize();

    billData.packageList = packageList;
    $.ajax({
          type: "POST",
          url: "/LoginMavenSpringMVC/billing/save",
          data: billData,
          success: function(response){
            console.log("Succeeded");
         },
          error: function(e){
          alert('Error: ' + e);
          }
       });

})

Answer 2

你可以这样尝试

 packageList = JSON.stringify(packageList); 

        //Form Data of id billForm//                        
        var billData=$('form#billForm').serialize();
       //Appending additional data with formData
        var dataToSend =  $.extend(billData,packageList);
        $.ajax({
              type: "POST",
              url: "/LoginMavenSpringMVC/billing/save",
              data: dataToSend,
              success: function(response){
                console.log("Succeeded");
             },
              error: function(e){
              alert('Error: ' + e);
              }
           });