1、post发送json格式参数

<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        // 提交事件
        form.on('submit(demo-login)', function(data){
            // 获取表单字段值
            var formData = data.field;

            $.ajax({
                url: '/auth/doLogin.do',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(res) {
                    console.log('success', res)
                    if(res.code == 200) {
                        // 登录成功了
                        //window.location.href = '/main.do';
                        //return false;
                        layer.alert('ok', {title: '登录错误'});
                    }
                    else {
                        // 登录失败了
                        let msg = res.msg;
                        layer.alert(msg, {title: '登录错误'});
                    }
                },
                error: function(err) {
                    console.log('error', err)
                }
            });

            return false; // 阻止默认 form 跳转
        });
    });
</script>

2、ajax使用formdata方式提交

                        //监听表单的提交时间.
                        form.on('submit(btnEdit)', function(data){
                            var field = data.field; // 获取表单字段值
                            // 此处可执行 Ajax 等操作
                            $.post("/index/update.do",field,function(res){
                                if(res.code ==200){
                                    layer.msg(res.msg);
                                    //关闭userForm
                                    layer.closeAll();
                                    //刷新表格
                                    table.reload('test');
                                }else{
                                    layer.msg(res)
                                }
                            })
                            // …
                            return false; // 阻止默认 form 跳转
                        });

在 LayUI 中使用 AJAX 请求数据通常是结合 LayUI 的表格、表单等组件进行操作。以下是几种常见的 AJAX 请求示例，涵盖了表单提交、表格数据加载和普通数据获取的情况。

1. 表单提交示例

<form class="layui-form" id="exampleForm" lay-filter="exampleForm">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
        </div>
    </div>
</form>

<script>
layui.use('form', function(){
    var form = layui.form;

    // 监听表单提交
    form.on('submit(submitForm)', function(data){
        // 提交表单数据到后端
        $.ajax({
            url: '/api/saveData',
            type: 'POST',
            data: data.field,
            success: function(res){
                // 处理提交成功后的逻辑
                console.log(res);
            },
            error: function(err){
                // 处理错误情况
                console.error(err);
            }
        });
        return false; // 阻止表单跳转
    });
});
</script>

2. 表格数据加载示例

<table id="demoTable" lay-filter="demoTable"></table>

<script>
layui.use('table', function(){
    var table = layui.table;

    // 渲染表格
    table.render({
        elem: '#demoTable',
        url: '/api/getTableData', // 数据接口 URL
        page: true,
        cols: [[
            {field: 'id', title: 'ID'},
            {field: 'username', title: '用户名'},
            {field: 'sex', title: '性别'},
            {field: 'city', title: '城市'},
            {field: 'sign', title: '签名'},
            {field: 'experience', title: '经验值'},
            {field: 'score', title: '评分'}
        ]]
    });
});
</script>

3. 普通数据获取示例

<button id="getDataBtn" class="layui-btn">获取数据</button>

<script>
layui.use('jquery', function(){
    var $ = layui.jquery;

    // 点击按钮获取数据
    $('#getDataBtn').on('click', function(){
        $.ajax({
            url: '/api/getSomeData',
            type: 'GET',
            success: function(data){
                // 处理获取数据成功后的逻辑
                console.log(data);
            },
            error: function(err){
                // 处理错误情况
                console.error(err);
            }
        });
    });
});
</script>

解释说明：

• 表单提交示例：使用 LayUI 的 form 模块监听表单提交事件，并通过 AJAX 将表单数据提交到后端保存。
• 表格数据加载示例：使用 LayUI 的 table 模块渲染表格，通过配置 url 参数指定数据接口，表格会自动请求数据并渲染。
• 普通数据获取示例：使用 LayUI 的 jquery 模块（或原生的 jQuery），通过 AJAX 请求获取后端接口返回的数据。

在实际应用中，根据具体需求和后端接口的设计，可以灵活调整 AJAX 请求的参数、处理逻辑以及错误处理方式，以实现与后端的数据交互和页面交互。