javascript - 如何从 Javascript/React 发送 AJAX 请求并在 Python REST API 中接收数据

Question

我的前端代码是用 React 编写的。我有一个简单的用户可以填写他们的姓名、职位、部门和其他类似的基本字符串字段。当用户点击提交时，我让我的 JavaScript 创建一个 AJAX 请求，发送给我用 python+flask 编写的 REST API。然而，当请求到来时，没有与该请求关联的数据。

我尝试在 python 中打印请求对象的每个组合，但每个组合都以 None、'' 或空字节字符串的形式返回。

react 代码:

class AddPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        const Http = new XMLHttpRequest();
        const url = '/api';
        Http.open("POST", url);
        Http.setRequestHeader("Content-type", "application/json");
        Http.send(this.state);

        Http.onreadystatechange = e => {
            window.location.replace("/add");
        }
    }

    handleInputChange(event) {
        const target = event.target;
        const targetName = event.target.name;
        const value = target.value;

        this.setState({
            [targetName]: value,
        });
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit} id="addUser">
                <label>
                Name:
                <input type="text" name="name" onChange={this.handleInputChange} />
                </label>
            </form>
        )
    }
}

Python REST API

from flask_classful import FlaskView, route
from flask import Flask, jsonify, request

class API(FlaskView):
    route_base = '/api'

    def post(self):
        if request.headers['Content-Type'] == 'application/json':
            print("before")
            posted_data = request.get_json()
            print("after")
            print(posted_data)

打印之前的数据，但不打印之后或发布的数据。当我通过返回“完成”来运行该代码时，我会在服务器日志中看到此内容

之前 [pid: 32472|app: 0|req: 12/12] 127.0.0.1 () {46 vars in 739 bytes} [Fri Aug 23 13:35:32 2019] POST/api/=> 在 1 毫秒内生成了 192 个字节(HTTP/1.1 400) 74 字节中的 2 个 header (1 个在核心 0 上切换) 所以我知道它正确接收 POST 请求，但我无法获取数据。

Answer 1

您需要从 Flask 服务方法内的请求对象中获取数据

def post(self):
    if request.headers['Content-Type'] == 'application/json':
        posted_data = request.get_json()
        print(posted_data)