如何将ReactJS前端输入数据传递到Flask-Python后端

问题排查&修复步骤 #

前端代码修改点 #

• 原有fetch请求缺少Content-Type: application/json请求头，Flask默认无法正确解析JSON格式的请求体，需要补充该配置
• 建议先完成接口请求再执行页面跳转，避免页面跳转导致未完成的fetch请求被强制中断
• 新增请求响应打印和错误捕获逻辑，方便前端侧验证请求是否发送成功
  修改后完整代码：

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Input } from 'antd'; // 可根据你实际的组件引入路径调整

function SearchBar() {
  const [searchedText, setSearchedText] = useState("");
  let navigate = useNavigate();

  const onSearch = async () => {
    try {
      // 先发送接口请求
      const res = await fetch('/ML/search',{
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          content: searchedText
        })
      });
      // 打印后端返回结果，验证数据传递状态
      const resData = await res.json();
      console.log('后端返回的接收内容：', resData);
      // 请求完成后再执行页面跳转
      navigate(`/search?q=${searchedText}`);
    } catch (err) {
      console.error('请求发送失败：', err);
    }
  };
  return (
    <div>
      <Input.Search
        placeholder="Enter keyword..."
        onChange={(e) => {
          setSearchedText(e.target.value);
        }}
        onSearch={onSearch}
        onPressEnter={onSearch}
        enterButton>
      </Input.Search>
    </div>
  );
}
export default SearchBar;

后端代码修改点 #

• 直接使用Flask内置的request.get_json()方法解析JSON请求体，无需手动调用json.loads，兼容性更好
• 新增后端控制台打印逻辑，可直接在Flask运行终端查看接收到的搜索内容
• 后续使用搜索内容查询SQL时，务必使用参数化查询，避免SQL注入风险
  修改后完整代码：

from flask import request, jsonify

@app.route('/ML/search', methods=['POST'])
def search():
    request_data = request.get_json()
    # 取到前端传递的搜索内容，可直接作为变量用于后续SQL查询
    searchData = request_data.get('content', '')
    # 后端控制台打印接收内容，直观验证传递结果
    print('接收到的前端搜索内容：', searchData)
    # SQL查询示例（参数化写法）：
    # cursor.execute("SELECT * FROM 你的表名 WHERE 要查询的列名 = %s", (searchData,))
    return jsonify({"received_content": searchData})

验证方式 #

• 前端：按F12打开浏览器控制台，输入内容触发搜索后，可在「控制台」面板查看打印的返回结果，也可在「Network」面板找到/ML/search请求，查看请求体、响应是否符合预期
• 后端：直接查看Flask运行的终端窗口，是否打印了你输入的搜索内容

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