怎么用spring mvc处理form表单的ajax验证

21 篇文章 1 订阅
用spring mvc处理form表单的ajax验证。
JAVA后端接收程序
@RequestMapping(value = "/fan/page.html", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> pageOfLoans(@RequestParam String pageNum, String pageSize, String userName,
            String createTime) {
        Map<String, String> queryParams = new HashMap<>();
        queryParams.put("userName", userName);
        queryParams.put("createTime", createTime);
        long total = carLoanService.getTotal(queryParams);
        List list = carLoanService.getPageList(pageNum, pageSize, queryParams);
        Map<String, Object> map = new HashMap<>();
        map.put("total", total);
        map.put("rows", list);
        return map;
    }
前端JSP代码
function getData(pageNum, pageSize) {
        var dg = $('#list_tb');
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        if ("" != pageNum && null != pageNum) {
            opts.pageNumber = pageNum;
        }
        if ("" != pageSize && null != pageSize) {
            opts.pageSize = pageSize;
        }
        pager.pagination('refresh', {
            pageNumber : opts.pageNumber,
            pageSize : opts.pageSize
        });
        var userName = $("#userName").textbox("getValue");
        var createTime = $("#createTime").datebox("getValue");
        $.ajax({
            type : "POST",
            url : "/car/fan/page.html",
            data : {
                "pageNum" : opts.pageNumber,
                "pageSize" : opts.pageSize,
                "userName" : userName,
                "createTime" : createTime,
            },
            dataType : "json",
            success : function(data) {
                dg.datagrid('loadData', data);
            }
        });
<body>
    <div id="list_tb_toolbar">
        <div style="float: right">
            <label>营销人员:</label> <input id="userName" class="easyui-textbox"
                data-options="validType:'chinese'"> <label>申请日期:</label>
            <input id="createTime" class="easyui-datebox"
                data-options="formatter:myformatter,parser:myparser">  <a
                href="#" class="easyui-linkbutton" iconCls="icon-query" plain="true"
                οnclick="query()">查询</a> <a href="#" class="easyui-linkbutton"
                iconCls="icon-reload" plain="true" οnclick="reset()">重置</a>
        </div>
        <div>
            <a href="#" class="easyui-linkbutton" iconCls="icon-search"
                plain="true" οnclick="view()">查看</a>
        </div>
    </div>
    <table id="list_tb" title="列表记录" class="easyui-datagrid"
        style="width: 100%; height: 400px"
        data-options="
                rownumbers: true,
                singleSelect: true,
                autoRowHeight: false,
                pagination: true,
                pageSize: 10,
                fitColumns: true,
                toolbar: '#list_tb_toolbar'">
        <thead>
            <tr>
                <th field="id" width="100" hidden></th>
                <th field="userName" width="100">员工名称</th>
                <th field="createTime" width="100">申请时间</th>
                <th field="customerName" width="100">客户姓名</th>
                <th field="descInfo" width="100">申请用途</th>
                <th field="money" width="100">申请金额</th>
                <th field="amount" width="100">借款期限</th>
                <th field="rate" width="100">利息</th>
                <th field="salfsmam" width="100">团队经理</th>
                <th field="manager" width="100">客户经理</th>
                <th field="actProcessId" width="100">流程ID</th>
            </tr>
        </thead>
    </table>
</body>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值