我有一个 ReactJS 前端和一个 Flask 后端,我很难让两者相互通信,特别是从前端发送表单变量到 Flask。
下面给出的是我在 127.0.0.1:3000 上运行的前端代码
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
class Form1 extends Component{
render(){
return(
<div class="form">
<form action="/result" method="get">
<input type="text" name="place" />
<input type="submit" />
</form>
</div>
);
}
}
ReactDOM.render(
<Form1/>,
document.getElementById('root')
);
我的后端 Flask 代码如下所示,在 127.0.0.1:5000 上运行
from flask import Flask, render_template, request
import requests
import json
app = Flask(__name__)
@app.route('/result',methods = ['POST', 'GET'])
def result():
if request.method == 'GET':
result = request.form
print (result['place'])
我对你的代码做了一些调整。
我所做的改变:
- 添加后端路径
http://localhost:5000/result
在前端作为表单操作路径。
- used
request.args.get
方法来获取提交的值。
前端运行在3000端口,后端运行在5000端口;同时在localhost
.
前端代码:
import ReactDOM from 'react-dom';
import React, {Component} from 'react';
class Form1 extends Component{
render(){
return (
<div class="form">
<form action="http://localhost:5000/result" method="get">
Place: <input type="text" name="place"/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
ReactDOM.render(
<Form1/>,
document.getElementById('root')
);
后端代码:
from flask import Flask, request
app = Flask(__name__)
@app.route('/result', methods = ['GET', 'POST'])
def result():
if request.method == 'GET':
place = request.args.get('place', None)
if place:
return place
return "No place information is given"
if __name__ == '__main__':
app.run(debug = True)
下面是程序运行截图:
参考:
Flask 文档:请求对象
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)