使用Ajax向Flask控制器发送选中表格行ID出现TypeError错误如何解决

问题根因 #

1. 变量赋值逻辑错误
   $.each() 方法返回的是jQuery对象本身，你在each回调内部声明的id_to_be_deleted属于函数局部变量，无法作用到外部的同名变量，最终传给ajax的是jQuery DOM集合，jQuery序列化参数时无法解析该类型就抛出了报错。
2. 单元格索引越界
   你的行结构里只有5个td元素，JS数组下标从0开始计数，cells[5]指向不存在的第6个单元格，取值本身就是undefined。

修正后的代码 #

function send_id_post() {
  // 直接选中选中行里带sorting_1类的td取数值，不依赖列顺序更稳定
  const id_to_be_deleted = $("#ex1 .tr-color-selected .sorting_1").text().trim();
  // 如果支持多选删除，就用下面的写法拿id数组
  // const id_to_be_deleted = $("#ex1 .tr-color-selected .sorting_1").map(function(){
  //   return $(this).text().trim();
  // }).get();

  $.ajax({
    type: "POST",
    url: "/zkl/del_pers_post",
    data: { id_to_be_deleted: id_to_be_deleted },
    // 可选加成功失败回调，方便调试
    success: function(res) {
      console.log('删除成功', res);
      // 可以加删除成功后刷新表格的逻辑
    },
    error: function(err) {
      console.error('删除失败', err);
    }
  });
}

Flask 后端接收示例（供参考） #

from flask import request, jsonify

@app.route('/zkl/del_pers_post', methods=['POST'])
def del_person():
    del_id = request.form.get('id_to_be_deleted')
    # 如果是传的数组就用 request.form.getlist('id_to_be_deleted[]')
    # 执行数据库删除逻辑...
    return jsonify({"status": "success"})

内容的提问来源于stack exchange，提问作者linus