如何通过AJAX将用户点击元素的ID传递给Flask？

我来帮你分析一下问题所在，以及如何解决这个ID传递的问题：

问题根源 #

你遇到的核心问题有两个：

1. AJAX请求的Content-Type未正确设置：Flask无法自动解析你发送的JSON数据，导致request.json返回None
2. 跳转时丢失请求数据：你在AJAX成功回调里直接跳转到/details的GET请求，之前POST的参数不会被携带过去

解决方案 #

方案一：简化流程，直接用GET请求传递ID（最适合你的场景） #

既然你的最终目的是跳转到详情页查看数据，其实不需要用AJAX POST，直接通过URL参数传递ID更简单：

修改JavaScript代码：

$(function(){
  $('li').click(function(){
    var elementID = this.id;
    // 直接跳转到带guid参数的详情页
    window.location.href = '/details?guid=' + elementID;
  });
});

对应的Flask代码：

@app.route('/details', methods=['GET'])
def details():
    guid = request.args.get("guid")
    if guid:
        # 这里调用你的API获取记录详情
        # detail_data = your_api_call(guid)
        # 然后渲染详情页面
        return f"正在展示ID为 {guid} 的记录详情"
    return "未提供有效的记录ID", 400

方案二：修复AJAX POST请求（如果需要先做后端处理再跳转） #

如果你确实需要先通过POST请求做一些后端逻辑，再跳转到详情页，可以这样修改：

修改JavaScript代码（关键是添加contentType）：

$(function(){
  $('li').click(function(){
    var elementID = this.id;
    var datatosend = JSON.stringify({"guid": elementID});
    $.ajax({
      url: '/details',
      data: datatosend,
      type: 'POST',
      contentType: 'application/json', // 必须设置这个，告诉后端是JSON数据
      success: function(response){
        // 后端处理完成后，跳转到带参数的详情页
        window.location.href = '/details?guid=' + elementID;
      },
      error: function(ts) {
        alert(ts.responseText)
      }
    });
  });
});

对应的Flask代码：

from flask import redirect, url_for

@app.route('/details', methods=['POST','GET'])
def details():
    if request.method == 'POST':
        # 用get_json()解析JSON数据，比request.json更可靠
        data = request.get_json()
        if data and 'guid' in data:
            guid = data['guid']
            # 这里可以做一些后端处理，比如验证ID有效性
            # 处理完成后重定向到GET请求的详情页
            return redirect(url_for('details', guid=guid))
        return "无效的数据格式", 400
    else:
        guid = request.args.get("guid")
        if guid:
            # 调用API获取详情并渲染页面
            return f"记录详情：{guid}"
        return "未提供记录ID", 400

为什么之前的代码拿不到数据？ #

• 当你发送JSON格式的数据时，必须告诉后端请求体是JSON类型，也就是设置contentType: 'application/json'。否则Flask会默认按表单数据解析，无法识别JSON字符串，导致request.json返回None。
• 你在AJAX成功回调里直接跳转到/details是GET请求，这个请求和之前的POST请求是完全独立的，POST的参数不会自动带过去，所以需要通过URL参数或者会话（session）传递ID。

给前端新手的调试小技巧 #

可以用浏览器的开发者工具（F12打开），查看「Network」标签：

1. 点击列表项后，找到对应的请求
2. 查看「Headers」确认Content-Type是否正确设置
3. 查看「Payload」或「Form Data」确认数据是否正确发送

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