TOP

Spring MVC Ajax 嵌套表单数据的提交(一)
2017-10-13 10:37:29 】 浏览:10029
Tags: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 提交后,服务端会以主子结构完好的承接客户端的数据。

debug

客户端的 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 只需按普通数据来提交即可。
看一下提交的数据:

image

  • SpringMVC 控制器接收数据
// 暂存
@RequestMapping(value = "/UpdateDesignApplyForAudit", method = RequestMethod.POST)
@ResponseBody
public TransactionResult UpdateDesignApplyForAudit(DesignApplyForAuditUpdate designApplyForAuditUpdate, @Cookieva lue(value = "base_cookieKey", required = false) CookieObject cookieObject) {
    designApplyForAuditUpdate.setCookieObject(cookieObject);
    TransactionResult result = null;
}

designApplyForAuditUpdate 的值如下:

designApplyForAuditUpdate

最后提一下客户端针对子表单的赋值,尽管上述的取值很方便,但赋值仍需逐个进行:

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇servlet Cookie 的使用(六) 下一篇spring boot / cloud (十八) 使用..