發送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);
            }
        });
    });
});

關注秦川以北會有更多精彩！！！