怎么用springmvc处理form表单的ajax验证
1个回答
展开全部
在controller进行相应映射,我给你几个简单例子,你看看参考吧。
@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;
}
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"
onclick="query()">查询</a> <a href="#" class="easyui-linkbutton"
iconCls="icon-reload" plain="true" onclick="reset()">重置</a>
</div>
<div>
<a href="#" class="easyui-linkbutton" iconCls="icon-search"
plain="true" onclick="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>
这是一个查找方法。
@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;
}
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"
onclick="query()">查询</a> <a href="#" class="easyui-linkbutton"
iconCls="icon-reload" plain="true" onclick="reset()">重置</a>
</div>
<div>
<a href="#" class="easyui-linkbutton" iconCls="icon-search"
plain="true" onclick="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>
这是一个查找方法。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询