Spring MVC Ajax 嵌套表單數據的提交

概述

在一些場景裏，某個大表單裏經常嵌套着一個或若干個小邏輯塊，好比如下表單裏「設計預審」中包括了一個子模塊表單「擬定款項」。

在這種狀況下該怎麼去設計實體類以及表單呢？

實體類的設計

在設計實體類時最好的方式是「主模塊包括了本身的字段，而子模塊只經過一個屬性被引用過來」，以下（如下字段都省略了 getter 和 setter 方法）。

主模塊：

public class DesignApplyForAuditUpdate extends BaseEntity {
    private String taskId;
    private String taskComment;
 
    private ProjectPaymentItem projectPaymentItem;
}

子模塊：

public class ProjectPaymentItem extends BaseEntity {
 
    // 定金
    private BigDecimal earnestPromotionAmount;
    private BigDecimal earnestPromotionPercentage;
 
    // 首付工程款
    private BigDecimal paymentPercentageFirstPay;
 
    // 水電工程項
    private BigDecimal paymentPercentageShuiDian;
 
}

表單的設計

在子模塊元素，能夠考慮使用「.」(點)操做符。大概看看主表單和子表單的模樣。

主表單：

<td colspan="3">
    <input class="easyui-textbox" type="text" name="taskComment" id="txtTaskComment_Edit"
           data-options=" multiline:true, validType:'length[1,2000]', novalidate:'novalidate', width:435, height:58 "/>
</td>

子表單（內嵌於主表單之中）：

<td colspan="3">
    <span>已交納</span>
    <input type="text" class="easyui-numberbox" name="projectPaymentItem.earnestPromotionAmount"
           id="txtEarnestPromotionAmount_Edit"
           missingmessage="請確保是有效的數字"
           min="0" max="99000000" precision="2"
           data-options="width:150, required:true, novalidate:'novalidate' "/>
    <span>元，優惠百分比：</span>
    <input type="text" class="easyui-numberbox" name="projectPaymentItem.earnestPromotionPercentage"
           id="txtEarnestPromotionPercentage_Edit"
           missingmessage="請確保是有效的數字"
           min="100" max="10000" precision="0"
           data-options="width:150, required:true, novalidate:'novalidate' "/>
    <span>%</span>
    <div>
        <span>可抵消金額：</span>
        <span id="earnestPromotionResult">5000</span>
        <span>元</span>
    </div>
</td>

能夠看到，子模塊的 name 屬性值前面須要經過點間隔符來補充一個前綴：「projectPaymentItem」

通過 Ajax 提交後，服務端會以主子結構無缺的承接客戶端的數據。

客戶端的 Ajax 和 SpringMVC 控制器

對於表單數據的提交只需採用普通的 Ajax 配置來提交就能夠，即便實體模型是嵌套層次。

• 客戶收集數據以及 Ajax

// 表單值獲取
var formData = $taskForm.form('r_serialize', false);
 
// 發起請求操做
$.ajax({
    data: formData,
    url: url,
    type: "POST",
    dataType: "json",
    success: function (result) {
        console.info("保存成功，返回的數據爲：↓");
        console.info(result);
 
        if (result.success) {
            $.messager.show({
                title: '提示', // 頭部面板上顯示的標題文本。
                msg: result.message
            });
        }
    },
    error: function (result) {
    }
}); //end ajax

儘管要提交的數據存在嵌套，但這還不屬性複雜模型，因此 Ajax 只需按普通數據來提交便可。

看一下提交的數據：

• SpringMVC 控制器接收數據

// 暫存
@RequestMapping(value = "/UpdateDesignApplyForAudit", method = RequestMethod.POST)
@ResponseBody
public TransactionResult UpdateDesignApplyForAudit(DesignApplyForAuditUpdate designApplyForAuditUpdate, @CookieValue(value = "base_cookieKey", required = false) CookieObject cookieObject) {
    designApplyForAuditUpdate.setCookieObject(cookieObject);
    TransactionResult result = null;
}

designApplyForAuditUpdate 的值以下：

最後提一下客戶端針對子表單的賦值，儘管上述的取值很方便，但賦值仍需逐個進行：

// 擬定款項
projectPaymentItemPartialView.initialForm(result.data.projectPaymentItem);
 
initialForm: function (data) {
    // 定金
    $txtEarnestPromotionAmount_Edit.numberbox('setValue', data.earnestPromotionAmount);
    $txtEarnestPromotionPercentage_Edit.numberbox('setValue', data.earnestPromotionPercentage);

    // 工程款
    $txtPaymentPercentageFirstPay_Edit.numberbox('setValue', data.paymentPercentageFirstPay);
    $txtPaymentPercentageShuiDian_Edit.numberbox('setValue', data.paymentPercentageShuiDian);
    $txtPaymentPercentageWaGong_Edit.numberbox('setValue', data.paymentPercentageWaGong);
    $txtPaymentPercentageMuGong_Edit.numberbox('setValue', data.paymentPercentageMuGong);
    $txtPaymentPercentageYouQi_Edit.numberbox('setValue', data.paymentPercentageYouQi);
    $txtPaymentPercentageFinalPay_Edit.numberbox('setValue', data.paymentPercentageFinalPay);

    // 額外款項
    $txtExtraAmount_Edit.numberbox('setValue', data.extraAmount);
}