python Flask JQuery使用說明


0.前言
    近期因為某種原因再次學習Flask框架。借助博客整理相關內容。Flask框架和Apache+PHP存在少許不同,Flask框架中JS和CSS文件存放於一個相對固定的位置。

普通情況下,位於static文件夾下(見圖1 文件夾結構)。

本文結合一個很easy的加法樣例試圖說明Flask框架中JQuery和Ajax的使用方法。

    這個樣例將執行在樹莓派中,請注意windows平台和linux平台也能夠執行該演示樣例,python具有良好的跨平台性能。

    【代碼倉庫】
    代碼倉庫位於 Bitbucket ,可下載zip包或通過TortoiseHg克隆代碼。

    【相關博文】
    【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 后台調試輸出



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM