- request.args.get() 获取前端传入的参数
前端代码格式为 /xxx?name=“laowang”
// 浏览器发起图片验证码请求/image_code?imageCodeId=xxxxx
var url = "/passport/image_code?imageCodeId=" + imageCodeId
后端接收代码
@app.route('/image_code')
def get_image_code():
image_code_id = request.args.get("imageCodeId", None)
# 进行业务逻辑处理
# 业务逻辑完成
return response # 返回给浏览器, 不用返回到前端
- 前端利用ajax 将数据传给后端
以下是伪代码:
@app.route('/sms_code', methods=["POST"])
def send_sms_code():
# 1. 前端传参数
# 数据存放在params中
var params = {
"mobile": mobile,
"image_code": imageCode,
"image_code_id": imageCodeId
}
# 利用ajax将数据传给后端
$.ajax({
// 请求地址
url: "/passport/sms_code", # url是视图函数的url
// 请求方式
type: "post", # 请求方式POST
// 请求参数
data: JSON.stringify(params), # 要传给后端的数据 params
headers: {
"X-CSRFToken": getCookie('csrf_token')
},
contentType: "application/json", # 数据格式JSON
# 2. 后端获取参数
params_dict = request.json
mobile = params_dict.get("mobile")
image_code = params_dict.get("image_code")
image_code_id = params_dict.get("image_code_id")
# 追踪源码request.json, 实际上调用get_json, 解析传入的json格式的数据并返回
# 3. 处理完业务逻辑后,返回响应
return jsonify(errno=RET.OK, errmsg="发送成功")
# 追踪源码 jsonify()
"""
class:`~flask.Response` with the JSON representation of
the given arguments with an `application/json` mimetype.
"""
即 json格式的response
形式为:
{
"errno": RET.OK,
"errmsg": "发送成功",
}
将这条数据 返回给前端
# 4. 前端接收后端发送来的响应回复
$.ajax({
success: function (response) {
// 成功
if (response.errno == "0") {}
}
else {
// 代表发送失败
alert(response.errmsg)
}
- ajax的简化 GET
GET请求是简单化的ajax请求
$.get(url, data, success(response))
url: 请求的url
data: 请求参数
success(): 请求成功时运行的函数
response: 返回数据
伪代码:
@index_blu.route('/news_list')
def news_list():
# 1. 前端传入参数
var params = {
"cid": currentCid,
"page": cur_page
}
$.get("/news_list", params, function (resp) {
# 请求成功执行
}
else {
# 请求失败执行
alert(resp.errmsg)
}
})
# 2. 后端接收参数
cid = request.args.get("cid")
page = request.args.get("page")
# 3. 后端返回响应
return jsonify(errno=RET.OK, errmsg="OK")
# 4. 前端接收响应
$.get("/news_list", params, function (resp) {
//请求成功执行
}
else {
// 请求失败执行
alert(resp.errmsg)
}
})
本文基于作者自己正在做的项目, 仅对前后端的几种数据交互方式做粗略讲解, 不通顺之处,还请谅解。