ajaxポスト経由で送信する前にシリアル化されたフォームデータに追加データを追加する

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が別のドメインクラスです：

public class ServicePackage implements Serializable{ 


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

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

} 

JSPコード：ときに、ユーザーの行のクローンを作成するために、いくつかのロジックもあります行数を追加する必要があります（下記は含まれません）。

が

$('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); 
       } 
      }); 

    }) 

パッケージリストは私のメインのドメインクラスビルに関連付けられているので、私はどのように設定する必要があります。

<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スクリプトコード、内側にありますbill.packageListに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); 
       } 
      });