python Flask JQuery使用说明

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

     +
     =
    ?



 

    【简要说明】

    【1】 网页编码为UTF8，请注意网页文件也要保存为UTF8格式

    【2】

            载入位于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 后台调试输出