LayUI发送Ajax请求

nihui123

于 2024-02-22 10:18:29 发布

阅读量4k

点赞数 10

文章标签： layui ajax 前端

本文链接：https://blog.youkuaiyun.com/nihui123/article/details/136226294

版权

页面初始化操作

var processData = null
$(function () {
   
    initView();
    initTable();
    // test();
})

function initView() {
   
    layui.use(['laydate', 'form'], function () {
   
        var laydate = layui.laydate;
        laydate.render({
   
            elem: '#applyDateTimeRange',
            type: 'datetime',
            range: true
        });
    });
}

初始化表格操作


function initTable() {
   
    //初始化table
    var headerObj = [[
        {
   
            title: '序号', width: 60, templet: function (d) {
   
                return d.LAY_TABLE_INDEX + 1;
            }
        },
        {
   field: "systemType", title: "平台", width: 100, sort: false,},
        {
   field: "applyOrderDetailId", title: "工单号", minWidth: 70, sort: false},
        {
   field: "createTime", title: "申请时间", minWidth: 60, sort: false},

        {
   field: "applyUserName", title: "申请人", width: 100, sort: false},
        {
   
            field: "dealState", title: "状态", width: 100, sort: false, templet: function (d) {
   
                if (d.dealState == 0) {
   
                    return "未开启";
                } else if (d.dealState == 1) {
   
                    return "流程中";
                } else if (d.dealState == 2) {
   
                    return "已完成";
                } else{
   
                    return "未知(" + d.applyStatus + ")";
                }
            }
        },
        {
   field: "", title: "操作", minWidth: 200, toolbar: '#startFlowTableBar',}
    ]];
    layui.use(['table', 'form'], function (exports) {
   
        var table = layui.table;
        table.render({
   
            elem: '#searchTable',
            url: 'http://localhost:8080/getStartList',
            page: true,     //显示分页默认不显示
            cols: headerObj,
            // request: {
   
            //     pageName: 'page',
            //     limitName: 'limit'
            // },
            // where: {
   
            //     applyStatus: $("#applyStatus").val()
            // },
            response: {
   
                statusName: 'status',
                statusCode: 'normal',
                countName: 'count',
                dataName: 'data'
            },
            parseData: function (res) {
   
                console.log("+++",res)
                return {
   
                    "count": res.data.total,
                    "data": res.data.list,
                    "status": "normal"
                };
            }
        });

        //table操作事件
        table.on('tool(searchTable)', function (row) {
   
            var data = row.data;
            var layEvent = row.event;
            var tr = row.tr;

            if (layEvent == 'level2Check') {
   
                initStartFlowView(data);
            } else if (layEvent == 'showDetailEvent') {
   
                // showDetailView(data)
                ajax_load_detail(data)
            }else if (layEvent == 'showFlowEvent'){
   
                ajax_load_flow(data)
            }

        });

        //搜索按钮
        $('#searchBtn').on('click', function () {
   
            var moduleType = $("#moduleType").val();
            var applyStatus = $("#applyStatus").val();
            var applyDateTimeRange = $("#applyDateTimeRange").val();

            table.reload('searchTable', {
   
                page: {
   
                    curr: 1 //重新从第 1 页开始
                },
                where: {
   
                    moduleType: moduleType,
                    applyStatus: applyStatus,
                    applyDateTimeRange: applyDateTimeRange
                }
            });
        });
    });
}


function showDetailView(data) {
   
    console.log("data",data)
    var resApplyId = data.resApplyId;
    var moduleType = data.moduleType;
    layui.use(['layer', 'laytpl', 'form', 'table'], function () {
   
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var tplHtml = insertFormTpl.innerHTML;
        var index;
        laytpl(tplHtml).render({
   }, function (html) {
   
            index = layer.open({
   
                type: 1,
                title: '展示详情',
                area: ['600px', '310px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
            form.render();
        });
        form.on('submit(insertFormBtn)', function (data) {
   
            console.log("获取到监听事件")
            $.ajax({
   
                url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
                type: "POST",
                dataType: "json",
                data: {
   
                    moduleType: moduleType,
                    checkResult: data.field.checkResult,
                    description: data.field.description
                },
                success: function (data) {
   
                    if (data.status == 'normal') {
   
                        layer.msg("审批成功");
                        table.reload("searchTable", {
   });
                        layer.close(index);
                    } else {
   
                        layer.msg(data.exception.error_msg || '审批失败！');
                    }

                }
            });
            return false;
        });
    });
}


function ajax_load_detail(data) {
   
    var resApplyId = data.applyOrderDetailId;
    $.ajax({
   
        url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
        type: "GET",
        dataType: "json",
        success: function (data_r) {
   
            console.log("+++++++" + data_r)
            console.log("====" + JSON.stringify(data_r))
            if (data_r.msg == 'NORMAL') {
   
                layui.use(['layer', 'laytpl', 'form', 'table'], function () {
   
                    var layer = layui.layer;
                    var form = layui.form;

                    var laytpl = layui.laytpl;
                    var table = layui.table;
                    var tplHtml = detailHtml.innerHTML;

                    laytpl(tplHtml).render({
   }, function (html) {
   
                        index = layer.open({
   
                            type: 1,
                            title: '展示详情',
                            area: ['600px', '310px'],
                            offset: 'auto',
                            maxmin: true,
                            content: html
                        });
                        form.render();
                    });

                    //TODO 设置每个字段对应的值
                    form.val("showApplyDetail", {
   
                        "applyOrderDetailId": data_r.data.applyOrderDetailId,
                        "applyOrderDetail": data_r.data.applyOrderDetail
                    })
                })
            } else {
   
                layer.msg();
            }
        }
    });
}

整个页面的HTML

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="

最低0.47元/天解锁文章