layui给后端发送删除请求_layui批量删除后端

在Web开发中，前后端分离的架构越来越普遍。使用Layui框架时，如何从前端向后端发送删除请求，特别是批量删除请求，是一个常见的需求。本文将介绍如何使用Layui实现这一功能，并提供多种解决方案。

解决方案概述

本文将介绍两种方法来实现Layui批量删除功能：

使用表单提交：通过表单提交选中的ID列表到后端。
使用Ajax请求：通过Ajax发送JSON数据到后端。

方法一：使用表单提交

1. HTML结构

首先，我们需要在HTML中创建一个表格，并添加复选框用于选择要删除的项。

html
</p>



    
    <title>Layui 批量删除示例</title>
    


    <table class="layui-table">
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>

    <button class="layui-btn" id="batchDelete">批量删除</button>

    
        <a class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
    

    
    
        layui.use(['table', 'form'], function(){
            var table = layui.table;
            var form = layui.form;

            // 监听工具条
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                }
            });

            // 批量删除按钮
            document.getElementById('batchDelete').addEventListener('click', function() {
                var checkStatus = table.checkStatus('idTest');
                var data = checkStatus.data;
                var ids = data.map(function(item) { return item.id; });

                if (ids.length === 0) {
                    layer.msg('请选择要删除的项');
                    return;
                }

                layer.confirm('确定要删除这些项吗？', function(index) {
                    var form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '/deleteBatch';

                    var input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'ids';
                    input.value = JSON.stringify(ids);
                    form.appendChild(input);

                    document.body.appendChild(form);
                    form.submit();
                    layer.close(index);
                });
            });
        });
    



<p>

2. 后端处理

假设你使用的是Node.js和Express，后端处理代码如下：

javascript
const express = require('express');
const app = express();
const bodyParser = require('body-parser');</p>

<p>app.use(bodyParser.json());</p>

<p>app.post('/deleteBatch', (req, res) => {
    const ids = req.body.ids;
    console.log('Received IDs:', ids);</p>

<pre><code>// 在这里执行删除逻辑
// 例如：从数据库中删除这些ID对应的记录

res.json({ success: true, message: '删除成功' });

});

app.listen(3000, () => {
console.log(‘Server is running on port 3000’);
});

方法二：使用Ajax请求

1. HTML结构

HTML结构与方法一相同，只是在JavaScript部分有所不同。

2. JavaScript代码

html</p>


    layui.use(['table', 'form'], function(){
        var table = layui.table;
        var form = layui.form;

        // 监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            }
        });

        // 批量删除按钮
        document.getElementById('batchDelete').addEventListener('click', function() {
            var checkStatus = table.checkStatus('idTest');
            var data = checkStatus.data;
            var ids = data.map(function(item) { return item.id; });

            if (ids.length === 0) {
                layer.msg('请选择要删除的项');
                return;
            }

            layer.confirm('确定要删除这些项吗？', function(index) {
                $.ajax({
                    url: '/deleteBatch',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ ids: ids }),
                    success: function(response) {
                        if (response.success) {
                            layer.msg('删除成功');
                            table.reload('idTest'); // 刷新表格
                        } else {
                            layer.msg('删除失败');
                        }
                    },
                    error: function() {
                        layer.msg('请求失败');
                    }
                });
                layer.close(index);
            });
        });
    });


<p>