Question

我用React编写了前端代码。我有一个简单的方法，用户可以在其中填写他们的姓名，职务，部门以及其他类似的基本字符串字段。当用户点击提交时，我让我的JavaScript创建一个以python + flask编写的REST API的AJAX请求。但是，当请求进入时，没有与该请求关联的数据。

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

反应代码：

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)

打印前，但不打印后或过帐数据。当我通过返回“完成”按原样运行该代码时，在服务器日志中得到了此代码

before [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/ => generated 192 bytes in 1 msecs (HTTP/1.1 400) 2 headers in 74 bytes (1 switches on core 0)因此，我知道它正确接收了POST请求，但是我无法获取数据。

Answer 1

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

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

如何通过Javascript / React发送AJAX请求并使用Python REST API接收数据

1 个答案: