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")
　　@ResponseBody
　　public 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，不然不能成功回显。