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

Question

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

域类：

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是另一个域类：

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与我的主域类比尔相关的，我应该怎么设置将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); 
       } 
      });