【flask】08-前后端的数据交互

1. 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  # 返回给浏览器， 不用返回到前端

2. 前端利用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)
	        }

3. 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)
	    }
	})

本文基于作者自己正在做的项目， 仅对前后端的几种数据交互方式做粗略讲解， 不通顺之处，还请谅解。