Python Flask No.5_Flask前後端間數據傳遞與展示

Python Flask No.5_Flask前後端間數據傳遞與展示

一.網站後端獲取前端數據方法
1.1.首先定義好HTML

<body>
<a href='/?value=123'>鏈接傳值</a> 
<form method='get/post' action='action'>
<input type='text' name='text'>
<input type='radio' name='radio' value='male'>男
<input type='radio' name='radio' value='female'>女
<p><input type="checkbox" name="category" value="財經" />財經</p>    
<p><input type="checkbox" name="category" value="汽車" />汽車</p>    
<p><input type="checkbox" name="category" value="科技" />科技</p>    
<p><input type="checkbox" name="category" value="房產" />房產</p>    
<p><input type="checkbox" name="category" value="旅遊" />旅遊</p>
<button type='submit'>
</form>
</body>

1.2.Flask的app.py

from flask import request
@app.route('/',methods=['GET,'POST'])
def index():
	vaule=request.form['name']#表單method爲post方法,獲取name爲name的輸入框值
	value=request.args.get('value')#通過鏈接方式獲取值
	value=request.values.get('radio')#表單method爲post方法,獲取單選框值
	values=request.form.getlist('category')##表單method爲post方法,獲取複選框值
	return render_template('index.html')

二.Flask從後端向前端傳值
2.1.Flask的app.py

from flask import request
    @app.route('/',methods=['GET,'POST'])
    def index():
    msg='張三'
   	return render_template('index.html',info=msg)#info就是傳給前端的數據

2.2.HTML怎麼接收

<body>
<p>{{msg}}</p>
</body>
經過上述操作就能在網頁中看到從後端傳來的信息了
個人覺得這種方式非常方便,例如經過判斷要給用戶反饋信息通過這種方式就能把需要傳遞的信息簡單有效的傳到前端去。

三.補充內容
上述傳遞的數據是一個簡單的字符串,我們要知道,有時候從後端傳回的信息可能是一個複雜的數據結構,例如python的元組、列表等,這時候怎麼傳遞給前端呢?這就要用到for循環了
3.1HTML界面
假如從後端傳回的數據是data=((張三,123),(李四,456)),這顯然是一個元組

<body>
    {%for item in data%}
   		<p>{{item[0]</p>
   		<p>{{item[1]</p>
   	{%endfor%}
</body>

for的用法是這樣,if同理,假如判斷data=((張三,123),(李四,456))是否存在,存在顯示數據,不存在顯示異常

<body>
    {%if data%}
        {%for item in data%}
       		<p>{{item[0]</p>
       		<p>{{item[1]</p>
       	{%endfor%}
    {%else%}
    	<p>No Data</p>
    {%endif%}
</body>

四.後記
下一篇文章會介紹Python Flask templates Jinja2模板的繼承,以此達到簡化前端代碼的目的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章