標籤：jsb 擴充 jquery run tortoise 第三方 route _for inline
0.前言 近期因為某種原因再次學習Flask架構。藉助部落格整理相關內容。Flask架構和Apache+PHP存在少許不同，Flask架構中JS和CSS檔案存放於一個相對固定的位置。普通情況下，位於static檔案夾下（見圖1 檔案夾結構）。
本文結合一個很easy的加法範例試圖說明Flask架構中JQuery和Ajax的使用方法。
這個範例將執行在樹莓派中，請注意windows平台和linux平台也能夠執行該示範範例，python具有良好的跨平台效能。 【代碼倉庫】 代碼倉庫位於Bitbucket，可下載zip包或通過TortoiseHg複製代碼。 【相關博文】 【1】python 擴充庫安裝 使用第三方鏡像源 【2】python Flask 學前班 【3】前端學習——HTML4和HTML5設定頁面語言字元集 【4】前端學習——JQuery Ajax使用經驗強烈建議把全部的檔案都儲存為UTF8格式，以免產生中文亂碼現象。
【檔案夾結構】 圖1 檔案夾結構 【static檔案夾】——jqury.js 【templates檔案夾】——main.html 【flask-jquery.py】<!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, 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連接埠。
python Flask JQuery使用說明
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
