0.前言
近期因為某種原因再次學習Flask框架。借助博客整理相關內容。Flask框架和Apache+PHP存在少許不同,Flask框架中JS和CSS文件存放於一個相對固定的位置。
普通情況下,位於static文件夾下(見圖1 文件夾結構)。
本文結合一個很easy的加法樣例試圖說明Flask框架中JQuery和Ajax的使用方法。
這個樣例將執行在樹莓派中,請注意windows平台和linux平台也能夠執行該演示樣例,python具有良好的跨平台性能。
【代碼倉庫】
【相關博文】
【2】
python Flask 學前班
1.引入JQuery
jquery.js文件須要存放於static文件夾中,在前端的代碼中還須要指定該js文件的路徑,這些路徑均為“相對路徑”。
強烈建議把全部的文件都保存為UTF8格式,以免產生中文亂碼現象。
【文件夾結構】


圖1 文件夾結構
【static文件夾】——jqury.js
【templates文件夾】——main.html
【flask-jquery.py】
2.簡單演示樣例
【1】前端部分
【templates文件夾】——main.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flask JQuery</title> <!-- 插入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> </head> <body> <p> <input type=text size=5 name=a> + <input type=text size=5 name=b> = <span id=result>?</span> </p> <p><input type="button" id="calculate" value="計算"></p> </body> </html>
【簡要說明】
【1】<meta charset="utf-8"> 網頁編碼為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, request app = 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 后台調試輸出
