python flask实现前后端交互

后端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import flask
app=flask.Flask(__name__)

from flask_cors import *
CORS(app, supports_credentials=True)#接收跨域请求

@app.route("/path")
def index():
try:
p=flask.request.args.get("name")
c=flask.request.args.get("sex")
print(p,c)
return p+","+c
except Exception as err:
return str(err)

if __name__=="__main__":
app.run(host="0.0.0.0", port=5000)#想要外部客户端访问,必须是0.0.0.0

前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flask测试页</title>
</head>
<body>
name:<input id="name" type="text" ><br>
sex:<input id="sex" type="text" >
<input type="submit" value="测试" onclick="submit()">
</body>
</html>
<script>
function submit()
{
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5 浏览器执行的代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var res=JSON.parse( xmlhttp.responseText );
//res是返回的数据,可以做后续处理
}
}
var name=document.getElementById("name").value;
var sex=document.getElementById("sex").value;
var url='http://127.0.0.1:5000/path?name='+name+'&sex='+sex;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>

直接测试url

HTML测试GET


python flask实现前后端交互
https://xinhaojin.github.io/2021/07/09/python-flask实现前后端交互/
作者
xinhaojin
发布于
2021年7月9日
许可协议