BJUI使用ajax异步表单提交时后台action要加@ResponseBody

场景

在使用BJUI的ajaxform异步表单提交时，后台直接使用

@RequestMapping时不能正常回显消息。

知识储备

ajaxform异步表单提交

通过data属性使用（带验证）：

<form action="../../json/ajaxDone.json" data-toggle="ajaxform"><h5>Data API Ajax提交表单1（带验证）</h5><div class="bjui-row col-2"><label class="row-label">姓名</label><div class="row-input"><input type="text" name="username" data-rule="required"></div><label class="row-label">住址</label><div class="row-input"><input type="text" name="address" data-rule="required"></div></div><hr style="margin:5px 0 15px;"><div class="text-center"><button type="submit" class="btn-default">提交表单</button></div> </form>

通过JS API属性使用（无验证）：

BJUI.ajax('ajaxform', {url: 'json/ajax/ajax-test1.json',form: $.CurrentNavtab.find('form:eq(1)'),validate: false,loadingmask: true,okCallback: function(json, options) {console.log('返回内容1：\n'+ JSON.stringify(json))} })

参数：

 

名称类型默认值描述

url	string	null	[必选] 提交的URL，未指定时将取form的action属性。
type	string	POST	[可选] ajax请求方式，未指定该参数时会取form的method属性值。
confirmMsg	string	null	[可选] 提交表单前的确认提示。
beforeSubmit	function(form)	null	[可选] 执行动作前的确认函数，返回false时不提交表单。
validate1.31	boolean	true	[可选] 提交表单前是否需要验证（需要验证插件nicevalidate支持）。
alertmsg	boolean	false	[可选] 是否弹出验证未通过的信息提示。
okalert	boolean	true	[可选] 请求正常返回后，是否弹出相应的信息提示。
callback	function(json)	null	[可选] 自定义回调函数。
okCallback	function(json, options)	null	[可选] 请求成功时的回调函数，该函数会覆盖B-JUI默认的成功回调函数，函数的options参数即是该doajax的options参数。
okAfterCallback	function(json, options)	null	[可选] 请求成功时的回调函数，该函数会在B-JUI默认的成功函数后执行，函数的options参数即是该doajax的options参数。
errCallback	function(json, options)	null	[可选] 请求失败时的回调函数，函数的options参数即是该doajax的options参数。
failCallback	function(msg, options)	null	[可选] ajax请求出错时的回调函数，函数的msg参数是服务端返回的出错信息，options参数即是该doajax的options参数。
form	selector	null	[可选] 要提交的表单，通过JS API使用时需要。
loadingmask	boolean	true	[可选] ajax请求时是否显示数据加载遮罩。
target	selector	null	[可选] 数据加载遮罩的父容器，值为空时默认是当前Navtab或Dialog。
reload	boolean	false	[可选] 请求返回成功状态后，是否重新加载当前target。
forward	string	null	[可选] 跳转地址，请求返回成功状态后，加载forward地址对应的内容到当前target。
forwardConfirm	boolean	false	[可选] 请求返回成功状态后，是否重新加载当前target。
closeCurrent	boolean	false	[可选] 请求返回成功状态后，是否关闭当前target(仅navtab或dialog)。
tabid	string	null	[可选] 请求返回成功状态后，需要刷新的navtab的id集合，多个id以,分隔。
dialogid	string	null	[可选] 请求返回成功状态后，需要刷新的dialog的id集合，多个id以,分隔。
divid	string	null	[可选] 请求返回成功状态后，需要刷新的div(仅限通过doload加载的div)的id集合，多个id以,分隔。
datagrids	string	null	[可选] 请求返回成功状态后，需要刷新的datagrid的id集合，多个id以,分隔。
gridrefreshflag	boolean	true	[可选] 刷新datagrid时保留其快速筛选、排序、分页信息。
ajaxTimeout	int	BJUI.ajaxTimeout	[可选] 请求超时设置，即$.ajax的timeout属性。

 

请求返回成功状态
指服务端返回B-JUI的消息JSON并在json[BJUI.keys.statusCode] == BJUI.statusCode.ok时有效。

 

@ResponseBody

@ResponseBody是作用在方法上的，@ResponseBody 表示该方法的返回结果直接写入 HTTP response body 中，一般在异步获取数据时使用【也就是AJAX】，在使用 @RequestMapping后，返回值通常解析为跳转路径，但是加上 @ResponseBody 后返回结果不会被解析为跳转路径，而是直接写入 HTTP response body 中。 比如异步获取 json 数据，加上 @ResponseBody 后，会直接返回 json 数据。@RequestBody 将 HTTP 请求正文插入方法中，使用适合的 HttpMessageConverter 将请求体写入某个对象。

举例：

@RequestMapping("/login")@ResponseBodypublic User login(User user){return user;}User字段：userName pwd那么在前台接收到的数据为：'{"userName":"xxx","pwd":"xxx"}'效果等同于如下代码：@RequestMapping("/login")public void login(User user, HttpServletResponse response){response.getWriter.write(JSONObject.fromObject(user).toString());}

后台实现

前端BJUI页面：

<form id="RechargeRecordForm" action="${ctx}/sys/cooperativePartnersManageAction/doRecharge"data-toggle="ajaxform"class="ajaxForm" data-toggle="validate" enctype="multipart/form-data"><li><button type="submit" class="btn-default" data-icon="save" >提交</button></li>

后台action：

@Controller @RequestMapping("/sys/cooperativePartnersManageAction") public class SysCooperativePartnerManageAction  extends BaseAction{...@ResponseBody@RequestMapping(value="/doRecharge")public Map<String, Object> doRecharge(Integer partnerId,BigDecimal rechargeMoney ) {ModelAndView mv = null;Map<String, Object> jsonResult = null;...业务代码省略Integer statusCode = 200;String msg = "成功";jsonResult = JsonResult.jsonReturn(statusCode, msg, tabid);mv.setViewName(ModelAndViewConstants.PARTNER_RECHARGE_VIEW);LogService.getInstance(this).debug("成功："+ModelAndViewConstants.PARTNER_RECHARGE_VIEW);}catch(Exception ex) {LogService.getInstance(this).error("失败：" + ex.getMessage(), ex);mv = new ModelAndView(ModelAndViewConstants.ERROR_VIEW);}return jsonResult;}

 

注意：

在BJUI使用ajax异步表单提交时，提交到后台的action要加@ResponseBody，不然不能成功回显。

 

 

 

 

 

 

 

总结

以上是生活随笔为你收集整理的BJUI使用ajax异步表单提交时后台action要加@ResponseBody的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。