使用AJAX呼叫後端的Flask

準備環境

首先,準備伺服器端的環境,建立資料夾 WEB ,之後全部的資料都放這以下。

Flask程式

建立需求套件的安裝檔: WEB\requirements.txt

Flask

安裝相依套件

pip install -r requirements.txt

此步驟可以直接改用 pip install Flask 但改用 requirements.txt 後續好維護。

基本 Flask 程式

建立 WEB\server.py 開始基本的 Flask 程式。

from flask import Flask

app = Flask(__name__)

#
# 服務的route寫在此
#

if __name__ == "__main__":
app.run(debug=True)

此處我們直接用 app.run(),這樣就不用透過環境變數操作。之後可以直接用 python server.py 啟動即可。

此例子中,我們預計使用兩個網址提供服務:

  • http://127.0.0.1:5000/ 提供網頁,以及 javascript環境
  • http://127.0.0.1:5000/api/test 提供資料,暫時為日期字串

/api/test 服務

提供

服務的 route 如下。

```python
@app.route('/api/test')
def test_page():
return str(datetime.datetime.now()) # 示範用

這裡只有簡單地把目前時間的字串回傳,給用戶端擷取時確認成功而已。 因為用到的 datetime,所以記得要 import

import datetime

/ 網頁

提供 / 網頁的 route如下。

@app.route('/')
def index_page():
return app.send_static_file('index.html')

此處把 HTML 與 javascript 存在另外的檔案中,參考下節。

啟動 flask

至此可以啟動 flask 提供服務了。

python server.py

應該會看到如下訊息:

> python server.py
* Serving Flask app "server" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 914-566-431

AJAX

通常會比較建議使用nginx或其他服務來提供靜態網頁,但為了簡化,這裏直接在 flask 中用 app.send_static_file 供檔(如前段),也因此,檔案中的目錄架構最好配合 flask 設定會比較簡單。

WEB 資料夾中,再建立一個子資料夾 static,然後把我們的靜態檔案 index.html 置於子資料夾 static內。 (檔名未必需要叫index.html,此處只是配合 @app.route(‘/‘) 的概念。)

WEB\static\index.html 內容:

<!DOCTYPE html>
<html lang="zh_Hant">
<head>
<meta charset="utf-8">
<title>filitov sample page</title>
<style type="text/css">

</style>
</head>
<body>

<h1>範例頁面</h1>
範例值:<span id="data"></span>

</body>
<script type="text/javascript">

</script>
</html>

為了讓網頁載入後再開始 AJAX 請求, <script> 置於最後端。

每兩秒鐘動作一次。

使用 setTimeout 設定計時器 2000 ms 後執行 repeatedly_get 函數,當然,第一次需自行啟動。

function repeatedly_get(){
fetch_from_server();
setTimeout(repeatedly_get, 2000);
}

repeatedly_get();

發出請求

每次對伺服器網址 http://127.0.0.1:5000/api/test 發出請求,回應正常的話,處理回復的全部內容。此處為非同步呼叫。

function fetch_from_server(){
var req = new XMLHttpRequest();
req.open('GET', '/api/test');
req.onreadystatechange = function () {
if (req.readyState === 4) {
console.log(req.responseText);
process_data(req.responseText);
}
};
req.send();
}

處理回應

實際處理回應資料...顯示到 id 是 data 的標籤中。

function process_data(v){
document.getElementById('data').innerHTML = v;
}

瀏覽

打開瀏覽器,瀏覽 http://127.0.0.1:5000/ 即完成。