发送ajax请求时候注意的问题

1.在发送ajax请求一般都是默认为异步,就是不去等待后台响应直接可以继续发送,

但这样会有时候遇到一些问题,无法获得后台的响应参数,

所以在你打开编辑弹出框完成数据编辑后无法刷新页面,

这时候可能存在的问是

(1)跨域

(2)网络延迟未获取响应数据

(3)加载的仍然是缓存中的数据,无法刷新

(4)浏览器插件拦截

解决问题思路:

跨域:

可以使用后台解决或者前台解决解决方式不细说百度下

网络延迟未获取到响应数据:

可以在ajax中将异步请求修改为同步(操作看以下示例)

缓存问题:

可以清除本地浏览器缓存

浏览器插件:

将可翻墙的或者安装的浏览器插件关闭

工作中遇到的示例(折磨好久):

1.实现的功能

使用layui将展示的数据进行审核

点击待审核:

备注审核的内容手动审核通过还是未通过

修改状态后的效果

前端思路:

首先编写一个layui的点击按钮,但layui需要在展示栏中引入一个参数

这是layui的一个初始化列表:

-----examine.js文件中的初始化列表-----

/**
     * 初始化表格的列
     */
    Examine.initColumn = function () {
        return [[
            {type: 'checkbox'},
            {field: 'accountid', hide: true, sort: true, title: '商户id'},
            {field: 'acname', sort: true, title: '商户名称'},
            {field: 'type', hide:true, sort: true, title: '审核类型'},
            {field: 'baltype', sort: true, title: '审核类型'},
            {field: 'money', sort: true, title: '金额'},
            {field: 'actualmoney', sort: true, title: '实际提现'},
            {field: 'commission', sort: true, title: '手续费'},
            {field: 'beforechange', sort: true, title: '变动前金额'},
            {field: 'afterchange', sort: true, title: '变动后余额'},
            {field: 'createtime', sort: true, title: '提交时间'},
            {field: 'updatetime', sort: true, title: '更新时间'},
            {field: 'status', hide:true, sort: true, title: '审核状态'},
            {field: 'dicstatus', sort: true, title: '审核状态'},
            {field: 'receivabletype',hide:true, sort: true, title: '收款方式'},
            {field: 'receiv', sort: true, title: '收款方式'},
            {field: 'remark', sort: true, title: '备注'},
            {toolbar: '#tableBar', title: '审核', minWidth: 100},
        ]];
    };
//最后一行为点击待审核的一个按钮,先查出指定的数据并将数据放入域中跳转页面;

-----java后台跳转的页面-----

*
     * @author xl
     * @Date 2018/12/23 4:56 PM
     */
    @RequestMapping("/examine_update/{id}")
    public String accountUpdate(@PathVariable String id, Model model) {
​
        if (ToolUtil.isEmpty(id)) {
            throw new RequestEmptyException();
        }
        //缓存部门修改前详细信息
        AcBalanceChange acBalanceChange = acBalanceChangeService.selectByPrimaryKey(Integer.parseInt(id));
        model.addAllAttributes(BeanUtil.beanToMap(acBalanceChange));
        LogObjectHolder.me().set(acBalanceChange);        
        return PREFIX + "examine_edit.html";
    }
​

-------examine.html主页面-------

//js是根据id关联的
<script type="text/html" id="tableBar">
// 这个script 是layui的判断要显示的按钮,根据后台的状态值去判断的
    {{#  if(d.status == '4'){ }}
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">待审核...</a>
    {{#  } else if(d.status == '2'){ }}
            <a class="layui-btn layui-btn-primary layui-btn-xs" style="background: lightgreen">审核通过</a>
    {{#  } else if(d.status == '3'){ }}
            <a class="layui-btn layui-btn-primary layui-btn-xs" style="background: #CD808C">审核未通过</a>
    {{#  } }}
</script>

--------examine_edit.html文件--------

@layout("/common/_container.html",{bg:"bg-white",js:["/assets/modular/system/examine/examine_edit.js"]}){
<form id="examineForm" lay-filter="examineForm" class="layui-form model-form">
    <input name="id" id="bcid" value="${id}" placeholder="" type="hidden" class="layui-input" lay-verify="required" required/>
​
    <div class="layui-form-item">
        <label class="layui-form-label">备注<span style="color: red;">*</span></label>
        <div class="layui-input-block">
            <input id="remark" name="remark" placeholder="备注" type="text" class="layui-input" lay-verify="required" required/>
        </div>
    </div>
​
    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" id="adopt" lay-submit>通过</button>
        <button class="layui-btn" id="notadopt" lay-submit>未通过</button>
    </div>
</form>
@}

------examine_edit.js文件------

//此时我要绑定两个ajax请求来修改编辑的内容
layui.use(['layer', 'form', 'admin', 'ax'], function () {
    var $ = layui.jquery;
    var $ax = layui.ax;
    var form = layui.form;
    var admin = layui.admin;
    var layer = layui.layer;
​
    // 让当前iframe弹层高度适应
    admin.iframeAuto();
​
    $("#adopt").click(function (data) {
        //选中对象的id
        var id = $("#bcid").val();
        var remark = $("#remark").val();
        console.log(remark)
        $.ajax({
            url: Feng.ctxPath + "/examine/update",
            data: {'id': id, 'status': '2', 'remark': remark},
            type: "Post",
            async: false,//关闭异步请求
            dataType: "json",
            //传给上个页面，刷新table用
            success: function (data) {
                console.log(data + "========")
                Feng.success("审核成功！");
                admin.putTempData('formOk', true);
                // window.parent.location.reload();
                //关掉对话框
                admin.closeThisDialog();
            },
            error: function (data) {
                $.messager.alert('错误', data.msg);
            }
        });
    });
​
    $("#notadopt").click(function (data) {
        //选中对象的id
        var id = $("#bcid").val();
        var remark = $("#remark").val();
        console.log(remark)
        $.ajax({
            url: Feng.ctxPath + "/examine/update",
            data: {'id': id, 'status': '3', 'remark': remark},
            type: "Post",
            async: false,//关闭异步请求
            dataType: "json",
            success: function (data) {
                console.log(data + "========")
                Feng.success("审核成功！");
                //传给上个页面，刷新table用
                // window.parent.location.reload();
                admin.putTempData('formOk', true);
                //关掉对话框
                admin.closeThisDialog();
            },
            error: function (data) {
                $.messager.alert('错误', data.msg);
            }
        });
    });
});

关注秦川以北会有更多精彩！！！