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

野性酷女 2023-10-18 11:37 27阅读 0赞

### 场景 ###

在使用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))
        }
    })

参数：

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

请求返回成功状态  
指服务端返回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页面：

后台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，不然不能成功回显。

####  ####