如何通过Tabulator操作按钮发起请求更新数据库，解决Express收不到请求问题

• 首先修正前端btnFormatter的语法错误和逻辑错误：
  1. 你当前的代码缺少事件监听函数、onRendered回调的闭合括号，且return element的位置错误，放在了onRendered回调内部，导致Tabulator无法正常拿到按钮DOM进行渲染
  2. 按钮内部嵌套的a标签会触发默认跳转行为，导致刚发起的fetch请求被页面刷新中断，直接去掉a标签即可
  3. 给fetch添加错误处理逻辑，方便排查前端请求报错
     修正后的前端代码如下：

function btnFormatter( cell, params, onRendered ) {
    var element = document.createElement('button');
    element.textContent = 'Distribute'
    element.className = "button-link"
  
    onRendered( function() {
        element.addEventListener('click',(e)=>{
            // 阻止默认行为
            e.preventDefault()
            const data = cell.getRow().getData()
            fetch('http://localhost:3000/delete/marketing', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            }).then(res => res.json())
            .then(res => {
                console.log('请求成功', res)
                // 删除成功后可直接移除表格当前行
                cell.getRow().delete()
            }).catch(err => {
                console.error('请求失败', err)
            })
        })
    })
    // return要放在formatter函数最外层，不能放在onRendered回调里
    return element;
}

var table = new Tabulator(".table", {
    height:'auto',
    ajaxURL:'/marketing.json',
    layout:"fitColumns",
    columns:[
        {title:"Customer Name", field:"name"},
        {title:"Commodity", field:"commodity",headerFilter:'input'},
        {title:"Quality", field:"quality",headerFilter:'input'},
        {title:"Quantity", field:"quantity"},
        {title:'Action',formatter:btnFormatter}
    ],
});

• 修正后端Express路由的问题：
  1. 先确认你的Express服务在注册路由之前已经添加了JSON解析中间件，否则无法解析POST的JSON格式参数，req.body会为空
  2. 路由处理完成后必须给前端返回响应，否则请求会一直挂起超时
     首先确认你服务入口文件（如app.js）里有这行配置，且必须写在路由注册之前：

app.use(express.json())

路由代码修正后：

router.post('/delete/marketing',(req,res)=>{
    console.log(req.body)
    connection.query('DELETE FROM order_table WHERE id = ?', req.body.id,(error,results)=>{
        if(error){
            console.log('删除失败', error)
            return res.status(500).json({status:'fail', msg:'删除失败'})
        } else {
            console.log('删除成功')
            return res.json({status:'success', msg:'删除成功'})
        }
    })
})

内容的提问来源于stack exchange，提问作者W-njorogeglitch