【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)
	    }
	})

本文基於作者自己正在做的項目， 僅對前後端的幾種數據交互方式做粗略講解， 不通順之處，還請諒解。