python Flask JQuery使用說明

python Flask JQuery使用說明
0.前言 最近由於某種原因再次學習Flask架構，藉助部落格整理相關內容。Flask架構和Apache+PHP存在少許不同，Flask架構中JS和CSS檔案存放於一個相對固定的位置。一般情況下，位於static檔案夾下（見圖1 目錄結構）。本文結合一個非常簡單的加法例子試圖說明Flask架構中JQuery和Ajax的用法。 這個例子將運行在樹莓派中，請注意windows平台和linux平台也可以運行該樣本，python具有良好的跨平台效能。 【代碼倉庫】 代碼倉庫位於Bitbucket，可下載zip包或通過TortoiseHg複製代碼。 【相關博文】 【1】python 擴充庫安裝 使用第三方鏡像源 【2】python Flask 學前班 【3】前端學習——HTML4和HTML5設定頁面語言字元集 【4】前端學習——JQuery Ajax使用經驗
1.引入JQuery jquery.js檔案需要存放於static檔案夾中，在前端的代碼中還需要指定該js檔案的路徑，這些路徑均為“相對路徑”。強烈建議把所有的檔案都儲存為UTF8格式，以免產生中文亂碼現象。 【目錄結構】 圖1 目錄結構 【static目錄】——jqury.js 【templates目錄】——main.html 【flask-jquery.py】
2.簡單樣本 【1】前端部分 【templates目錄】——main.html

Flask JQuery<script src="{{url_for('static', filename='jquery.js')}}"></script><script type=text/javascript>var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};</script><script type=text/javascript>$(function() {    function submit_form(e) {        $.getJSON($SCRIPT_ROOT + '/add', {            a: $('input[name="a"]').val(),            b: $('input[name="b"]').val(),            now: new Date().getTime()        },        function(data) {            $('#result').text(data.result);        });    };    // 綁定click事件    $('#calculate').bind('click', submit_form);});</script>
     +     =    ?
 

【簡要說明】 【1】 網頁編碼為UTF8，請注意網頁檔案也要儲存為UTF8格式 【2】<script src="{{url_for('static', filename='jquery.js')}}"></script> 載入位於static檔案夾中的jquery.js檔案 【3】var $SCRIPT_ROOT = {{request.script_root|tojson|safe}}; 抱歉，暫未理解其含義 【4】now: new Date().getTime() 防止瀏覽器緩衝的一種小技巧。 【2】後端部分 【flask-jquery.py】

# -*- coding: utf-8 -*-from flask import Flask, jsonify, render_template, requestapp = Flask(__name__)@app.route("/")def index():# 首頁面    return render_template("main.html")   @app.route('/add')def add_numbers():    a = request.args.get('a', 0, type=int)    b = request.args.get('b', 0, type=int)    return jsonify(result = a + b)   if __name__=="__main__":    app.run(host = "0.0.0.0",port = 8080, debug = True)

【簡要說明】 【1】request.args.get('a', 0, type=int) 前端通過GET方法提交，在URI提取參數a和參數b。中間的一個0為a和b的預設值，當函數執行失敗時，a或b就只能等於0了。 【2】app.run(host = "0.0.0.0",port = 8080, debug = True)。所有IP地址均可以訪問，連接埠號碼為8080，而不是預設的80連接埠。
【3】運行於樹莓派中 把圖1所示的檔案夾FTP傳輸到樹莓派中，執行flask-jquery.py即可 python flask-jquery.py
圖2 前端頁面
圖3 後台調試輸出