使用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";
}
任何帮助或建议都会有所帮助。请帮我解决这个问题。提前谢谢。
答案 0 :(得分：0)
$('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);
}
});
})
答案 1 :(得分：0)
您可以尝试这样
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);
}
});