前后端分离时,关于前端Ajax-Post数据时,遇到的一个问题

在写一个报名提交的页面,前端组写了前端页面
但是没有写后端的传值,本来想构建Flask结构目录
但是想实现API的形式,可以控制提交时间段-在不招新的时间关闭后端
就打算分离开,form表单提交的Post一开始是这样写的

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
$("form").submit(function(){
var flagname = isname();
var flagphone = isphone();
var flagclass = isclass();
var flagemail = isemail();
var flaggroup = isgroup();

if(flagname == true && flagphone == true && flagclass == true
&& flagemail == true && flaggroup == true){
var data={
InfoNmae:InfoName.value,
InfoPho:InfoPho.value,
InfoCls:InfoCls.value,
InfoEmail:InfoEmail.value,
InfoGroup:arr,
InfoPower:InfoPower.value
};
$.ajax({
type:'POST',
url: "/joinus",
data: JSON.stringify(data),
dataType : 'json',
success:function(res){
alert("提交成功");
},
error: function (res){
var json_data=JSON.stringify(res);
alert(json_data);
// alert("现在不迎新哦~");
},
});
}
else {
return false;
}
})

后端是这样

1
2
3
4
5
6
7
8
@app.route("/joinus",methods=['POST'])
def index():
data=request.get_json(force=True)
if data:
print(data)
return jsonify({"status":True})
else:
return jsonify({"status":False})

一开始想的是,直接将url改为后端运行的绝对路径不行了
但是修改之后发现,但是一直报500错误,后来才知道是跨域问题……

在网上找到了这种方法
第一种直接修改数据类型为jsonp,采用GET方法,确实可行…..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
type:'POST',
url: "http://127.0.0.1:5000/joinus",
data: JSON.stringify(data),
dataType : 'jsonp',
success:function(res){
alert("提交成功");
},
error: function (res){
var json_data=JSON.stringify(res);
alert(json_data);
// alert("现在不迎新哦~");
},
});

第二种就是在flask端加上响应头
但是上个链接中在用make_reponse()函数形成响应头时没有将数据json化
还是报500错误

1
2
3
4
5
6
7
8
9
10
11
12
@app.route("/api",methods=['POST'])
def index():
data=request.get_json(force=True)
if data:
print(data)
res = make_response(jsonify(data))
res.headers['Access-Control-Allow-Origin'] = '*'
res.headers['Access-Control-Allow-Methods'] = 'POST'
res.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
return res
else:
return jsonify({"error":False})

第三种是应用了flask集成的轮子
直接pip install flask_cors

1
2
3
4
5
6
7
8
9
10
11
12
13
from flask_cors import CORS

# r'/*' 是通配符,让本服务器所有的 URL 都允许跨域请求
CORS(app, resources=r'/*')

@app.route("/joinus",methods=['GET','POST'])
def index():
data=request.get_json(force=True)
if data:
print(data)
return jsonify({"status": True})
else:
return jsonify({"status": False})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
type:'POST',
crossDomain: true,
url: "http://127.0.0.1:5000/joinus",
data: JSON.stringify(data),
dataType : 'json',
success:function(res){
alert("提交成功");
},
error: function (res){
var json_data=JSON.stringify(res);
alert(json_data);
// alert("现在不迎新哦~");
},
});

感觉第三种方便点,第二种也不错