Ajax

Posted 2020-08-20 guoDaXia的博客

1、Ajax回调函数

自定义函数参数为：callback，通过DOM附加：data-callback="自定义函数名称"，自定义函数名称不带括号以及参数

 

自定义回调示例：

function mycallback(json){
  $(this)
      .bjuiajax(‘ajaxDone‘,json)
      .navtab(‘refresh‘)
      .navtab(‘reloadFlag‘,json.tabid)
//do other something  
}

JSON参数：

名称	类型	描述
statusCode	int	必选。状态码（ok=200，error=300，timeout=301），可以在bjui.init时配置三个参数的默认值
message	string	可选 信息内容
tabid	string	可选 待刷新的navtab id，多个id以英文逗号分隔开，当前的navtab id不需要填写，填写后可能会导致当前navtab重复刷新
dialogid	string	可选 待刷新的dialog id，多个id以英文逗号分隔开，请不要填写当前的dialog id，要控制刷新当前的dialog，请设置dialog中表单的reload参数
divid	string	可选 等待刷新div id，多个id以英文逗号分隔开，请不要填写当前的div id，要控制刷新当前div，请设置该div中表单的reload参数
closeCurrent	boolean	可选 是否关闭当前窗口（navtab或dialog）
forward	string	可选。跳转到某个url
forward	string	可选。跳转url前的确认提示信息

 

2、提交表单

初始化

Data属性：form添加属性data-toggle="validate"或data-toggle=“ajaxform”。其中data-toggle=“validate”属性需要通过验证后才能提交。

例子：

<%--ajax提交表单--%>
    <form action="${pageContext.request.contextPath}/jsp/form/ajaxSubmit.html" data-toggle="validate">
        <p><label class="x85">登录名：</label><input type="text" name="username" data-rule="required" placeholder="登录名" class="form-control"> </p>
        <p><label class="x85">密码：</label><input type="password" name="password" data-rule="required" placeholder="登录密码" class="form-control"></p>
        <input type="submit"  value="登陆">
    </form>
    <br/>
        <form action="${pageContext.request.contextPath}/jsp/form/ajaxSubmit.html" data-toggle="ajaxform">
            <p><label class="x85">登录名：</label><input type="text" name="username" data-rule="required" placeholder="登录名" class="form-control"> </p>
            <p><label class="x85">密码：</label><input type="password" name="password" data-rule="required" placeholder="登录密码" class="form-control"></p>
           <button type="submit" class="btn-blue">登陆</button>
        </form>

jqueryAPI：API方式目前不支持验证提交

$(form).bjuiajax(‘form‘,options)

 

参数（options）

名称	类型	默认值	描述
confirmMSG	string	null	【可选】提交表单钱的确认信息
callback	function（json）	null	【可选】默认由内置回调函数处理，参数json由服务端返回
loadingmask	boolean	true	【可选】ajax请求时是否显示数据加载遮罩
reload	boolean	true	【默认回调函数使用】 表单提交成功后，是否刷新当前窗口
reloadNavtab	boolean	false	【默认回调函数使用】（仅限dialog及局部刷新）表单提交成功后，是否刷新当前navtab

注意：form如果有属性enctype="multipart/form-data",支持HTML5的浏览器以FormData方式提交数据，不支持的则由iframe提交