python Flask JQuery使用說明，flaskjquery
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
<!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連接埠。
flask是個好東西。我馬上也去用一下。ajax重新整理很簡單。你學一下jquery就可以。其中你返回的結果，重新整理部分用js實現。調用flask的json響應。
剛剛上去看了flask的教程。其中它有一個pattern for flask，裡面有一個章節就是叫怎麼引用ajax和jquery的。你先用它的例子代碼加到你的程式，然後，自己做一個json的響應結果，最後用js將內容顯示就可以了。實在是不想做html構造，直接返回html，用js.writedocument也是可以的。
Python的問題ImportError: No module named flask
先import flask 下面加一句 help(flask)這個可以檢測出系統能不能找到你安裝的這個模組。如果運行以後還是報錯的話說明系統找不到你的模組裝在哪了。我估計可能會報錯，如果你用的是windows,你要確定你的模組的路徑在environment variable 的path裡面。有更多問題請追問。
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
