python Flask JQuery使用說明
阿新 • • 發佈：2017-05-30
inline body 中間 通過 javascrip numbers -s text csdn
0.前言 近期因為某種原因再次學習Flask框架。借助博客整理相關內容。Flask框架和Apache+PHP存在少許不同，Flask框架中JS和CSS文件存放於一個相對固定的位置。
1.引入JQuery ![技術分享]()
圖1 文件夾結構 【static文件夾】——jqury.js 【templates文件夾】——main.html 【flask-jquery.py】
2.簡單演示樣例 【1】前端部分 【templates文件夾】——main.html
【3】執行於樹莓派中 把圖1所看到的的文件夾FTP傳輸到樹莓派中。執行flask-jquery.py就可以 python flask-jquery.py![技術分享]()
圖2 前端頁面
圖3 後臺調試輸出
普通情況下，位於static文件夾下（見圖1 文件夾結構）。
本文結合一個很easy的加法樣例試圖說明Flask框架中JQuery和Ajax的使用方法。
這個樣例將執行在樹莓派中，請註意windows平臺和linux平臺也能夠執行該演示樣例，python具有良好的跨平臺性能。 【代碼倉庫】 代碼倉庫位於Bitbucket，可下載zip包或通過TortoiseHg克隆代碼。 【相關博文】 【1】python 擴展庫安裝 使用第三方鏡像源 【2】python Flask 學前班 【3】前端學習——HTML4和HTML5設定頁面語言字符集 【4】前端學習——JQuery Ajax使用經驗1.引入JQuery
強烈建議把全部的文件都保存為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> # -*- 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 後臺調試輸出
python Flask JQuery使用說明