上篇文章我們學(xué)習(xí)了Flask框架——Flask-SQLite數(shù)據(jù)庫(kù)，這篇文章我們學(xué)習(xí)Flask框架——Flask-Sijax。
簡(jiǎn)單地了解web應(yīng)用中的同步與異步交互：
同步交互：用戶(hù)觸發(fā)某個(gè)HTTP請(qǐng)求到服務(wù)器，服務(wù)器對(duì)其進(jìn)行處理后返回一個(gè)新的HTML網(wǎng)頁(yè)響應(yīng)到客戶(hù)端，在服務(wù)器返回響應(yīng)前，客戶(hù)端只能空閑等待，即使是一次很小的交互、只需從服務(wù)器端返回一個(gè)很簡(jiǎn)單的數(shù)據(jù)，都要返回一個(gè)完整的HTML網(wǎng)頁(yè)來(lái)展示，而用戶(hù)每次都要浪費(fèi)時(shí)來(lái)讀取整個(gè)頁(yè)面。
異步交互：瀏覽器不必等待服務(wù)器返回結(jié)果，在服務(wù)器響應(yīng)的時(shí)間內(nèi)，客戶(hù)端仍可以繼續(xù)做其他的事情。
AJAX全名為：Asynchronous Javascript And XML（異步JavaScript和XML）是與服務(wù)器交換數(shù)據(jù)的技術(shù)，它在不需要刷新全部頁(yè)面的情況下，實(shí)現(xiàn)了對(duì)部分網(wǎng)頁(yè)的數(shù)據(jù)更新，快速回應(yīng)用戶(hù)的操作。
Flask-Sijax
通過(guò)Flask-Sijax可以將Sijax添加到我們的Flask程序中，F(xiàn)lask-Sijax安裝方法很簡(jiǎn)單，執(zhí)行如下代碼：
pip install flask-sijax
Sijax代表’Simple Ajax’，它是一個(gè)Python/jQuery庫(kù)，可以通過(guò)Sijax將Ajax引入到web應(yīng)用程序。 它使用jQuery.ajax來(lái)發(fā)出AJAX請(qǐng)求。
在Sijax中最重要和最常用的是Sijax.request()，其語(yǔ)法格式為：
Sijax.request('function_name',[參數(shù)列表],{jQuery.ajax附加參數(shù)})
其中：
- function_name：必填，指定要調(diào)用的函數(shù)；
- 參數(shù)列表：可填，傳遞的參數(shù)；
- jQuery.ajax附加參數(shù)：允許覆蓋Sijax用來(lái)調(diào)用jQuery.ajax的一些參數(shù)。
例如：
Sijax.request('function_name'); #調(diào)用不帶參數(shù)的函數(shù)
Sijax.request('function_name',['arg1,....,argn']); #調(diào)用帶參數(shù)的函數(shù)
Sijax.request('function_name',[],{'timeout':1500}); #調(diào)用不帶參數(shù)的函數(shù)，告訴底層jQuery.ajax使用1.5秒的超時(shí)時(shí)間
接下來(lái)我們通過(guò)Flask程序來(lái)演示如何使用Flask-Sijax。
初始化配置
在安裝Flask-Sijax的過(guò)程中，json2.js會(huì)被默認(rèn)安裝到Flask項(xiàng)目目錄中的static/js/sijax中，如下圖所示：
Sijax使用JSON在瀏覽器和服務(wù)器之間傳遞數(shù)據(jù)，因此，瀏覽器需要本地支持JSON或從json2.js文件獲得JSON支持，F(xiàn)lask程序配置如下所示：
import flask_sijax
from flask import Flask, g, render_template
import os
from flask_sijax import sijax
app = Flask(__name__)
path=os.path.join('.',os.path.dirname(__file__),'static/js/sijax') #json2.js文件路徑
app.config['SIJAX_STATIC_PATH']=path #配置sijax靜態(tài)文件路徑
app.config['SIJAX_JSON_URI'] = '/static/js/sijax/json2.js' #加載json2.js靜態(tài)文件的url
flask_sijax.Sijax(app) #添加Sijax
if __name__ == '__main__':
app.run(debug=True)
首先配置sijax靜態(tài)文件的路徑，然后配置加載json2.js靜態(tài)文件，為了Flask程序能夠使用Sijax，所以需要使用flask_sijax添加Sijax到我們的Flask程序。
處理Sijax請(qǐng)求
要是視圖函數(shù)能夠處理Sijax請(qǐng)求，有兩種方法：
1、在路由裝飾器中，添加POST請(qǐng)求方法：
@app.route('/url'，methods = ['GET'，'POST'])
2、使用輔助裝飾器：
@flask_sijax.route(app,'視圖函數(shù)名')
視圖函數(shù)示例代碼如下所示：
@flask_sijax.route(app,'/hello') #使用輔助裝飾器來(lái)處理Sijax請(qǐng)求
def hello():
def say_hi(response): #定義say_hi函數(shù)
response.alert('成功使用Sijax!') #彈出警示框
if g.sijax.is_sijax_request: #判斷是否請(qǐng)求為sijax請(qǐng)求
g.sijax.register_callback('say_hi',say_hi) #是sijax請(qǐng)求就調(diào)用say_hi函數(shù)
return g.sijax.process_request() #Sijax執(zhí)行hello函數(shù)并將響應(yīng)返回給瀏覽器
return render_template('my.html') #使用render_template()方法渲染my.html
首先我們通過(guò)輔助裝飾器讓使視圖函數(shù)hello能夠處理sijax請(qǐng)求，再自定義say_hi函數(shù)，其作用是彈出警示框。通過(guò)sijax.is_sijax_request方法判斷是否請(qǐng)求為sijax請(qǐng)求，是sijax請(qǐng)求通過(guò)sijax.register_callback()方法調(diào)用say_hi函數(shù)，使用sijax.process_request()方法執(zhí)行hello函數(shù)并響應(yīng)返回給瀏覽器。
注意：g相當(dāng)于單次請(qǐng)求中的“全局變量”，能在單次請(qǐng)求中調(diào)用，但是和其他請(qǐng)求是互相隔離的，隨著本次請(qǐng)求結(jié)束而銷(xiāo)毀；
my.html模板文件代碼如下所示：
<html>
<head>
{# 調(diào)用百度的jQuery加速 #}
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
{# 安裝Flask-sijax時(shí)默認(rèn)安裝的sijax.js #}
<script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
{# 使用過(guò)濾器safe禁止轉(zhuǎn)譯sijax.get_js()值 #}
<script type="text/javascript"> {{ g.sijax.get_js()|safe }} </script>
</head>
<body>
<a href="javascript://" onclick="Sijax.request('say_hi');">點(diǎn)擊</a>
</body>
</html>
這里我們調(diào)用了百度的jQuery加速，并調(diào)用了靜態(tài)文件夾中的sijax.js文件，使用過(guò)濾器safe禁止專(zhuān)業(yè)sijax.get_js()值。
在超鏈接a標(biāo)簽中，添加了點(diǎn)擊事件，當(dāng)點(diǎn)擊會(huì)使用不帶參數(shù)的Sijax.request()方法調(diào)用say_hi函數(shù)發(fā)出Sijax請(qǐng)求。
啟動(dòng)Flask程序，訪問(wèn)http://127.0.0.1:5000/hello，如下圖所示：
其中：jquery.min.js是我們調(diào)用了百度jQuery產(chǎn)生的；sijax.js是我們調(diào)用本地靜態(tài)文件中的sijax.js產(chǎn)生的；
當(dāng)我們點(diǎn)擊后，就會(huì)彈出警示框，如下圖所示：
查看最后一個(gè)hello請(qǐng)求，如下圖所示：
其中sijax_rq為我們請(qǐng)求的函數(shù)，sijax_args為我們請(qǐng)求傳遞的參數(shù)，由于我們調(diào)用不帶參數(shù)的Sijax.request()方法。
這樣就成功在不刷新網(wǎng)頁(yè)的請(qǐng)求下，發(fā)送了sijax請(qǐng)求并獲得了響應(yīng)。
獲取表單數(shù)據(jù)
那么當(dāng)我們需要在不刷新網(wǎng)頁(yè)的請(qǐng)求下，獲取表單的數(shù)據(jù)發(fā)送sijax請(qǐng)求時(shí)，可以使用sijax中的Sijax.getFormValues()方法，其語(yǔ)法格式為：
Sijax.getFormValues(jQuery_selector)
這里我們使用上面的視圖函數(shù)代碼，而my.html模板文件代碼修改為：
<html>
<head>
{# 調(diào)用百度的jQuery加速 #}
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
{# 安裝Flask-sijax時(shí)默認(rèn)安裝的sijax.js #}
<script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
{# 使用過(guò)濾器safe禁止轉(zhuǎn)譯sijax_get_js() #}
<script type="text/javascript"> {{ g.sijax.get_js()|safe }} </script>
</head>
<body>
{# 創(chuàng)建id為my_form的表單 #}
<form id="my_form">
<input type="text" name="textbox" value="textbox 1" />
<input type="text" name="tbx[nested]" value="tbx 2" />
<input type="checkbox" name="cbx" checked="checked" />
</form>
{# 使用Sijax.getFormValues方法獲取id為my_form的表單數(shù)據(jù) #}
<script type="text/javascript">
var values = Sijax.getFormValues('#my_form');
</script>
{# 使用帶參數(shù)Sijax.request()方法傳遞values值 #}
<a href="javascript://" onclick="Sijax.request('say_hi',values);">點(diǎn)擊</a>
</body>
</html>
修改my.html模板文件后，啟動(dòng)Flask程序，訪問(wèn)http://127.0.0.1:5000/hello點(diǎn)擊后，如下圖所示：
這時(shí)sijax_args參數(shù)就有數(shù)據(jù)了。
注意：當(dāng)表單中的字段缺少name名稱(chēng)或被禁用，sijax.getFormValues是無(wú)法獲取到的。
好了，F(xiàn)lask框架——Flask-Sijax的知識(shí)就講到這里了，感謝觀看，下篇文章學(xué)習(xí)Flask框架——項(xiàng)目可安裝化。
公眾號(hào)：白巧克力LIN
該公眾號(hào)發(fā)布Python、數(shù)據(jù)庫(kù)、Linux、Flask、自動(dòng)化測(cè)試、Git等相關(guān)文章！
