0.前言



普通情况下，位于static文件夹下（见图1 文件夹结构）。

本文结合一个很easy的加法样例试图说明Flask框架中JQuery和Ajax的使用方法。




    【代码仓库】



    代码仓库位于 Bitbucket ，可下载zip包或通过TortoiseHg克隆代码。



 





1.引入JQuery



强烈建议把全部的文件都保存为UTF8格式，以免产生中文乱码现象。



    【文件夹结构】



 

python flask 获取request json python flask jsonify_ViewUI


图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了。


全部IP地址均能够訪问，端口号为8080。而不是默认的80端口。



    【3】执行于树莓派中


    把图1所看到的的文件夹FTP传输到树莓派中。执行flask-jquery.py就可以


    python flask-jquery.py


python flask 获取request json python flask jsonify_ViewUI_02



图2 前端页面


python flask 获取request json python flask jsonify_前端_03