python Flask JQuery使用说明
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了python Flask JQuery使用说明相关的知识,希望对你有一定的参考价值。
0.前言
近期因为某种原因再次学习Flask框架。借助博客整理相关内容。Flask框架和Apache+PHP存在少许不同,Flask框架中JS和CSS文件存放于一个相对固定的位置。
普通情况下,位于static文件夹下(见图1 文件夹结构)。
本文结合一个很easy的加法样例试图说明Flask框架中JQuery和Ajax的使用方法。
这个样例将执行在树莓派中,请注意windows平台和linux平台也能够执行该演示样例,python具有良好的跨平台性能。
【代码仓库】
【相关博文】
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 后台调试输出
以上是关于python Flask JQuery使用说明的主要内容,如果未能解决你的问题,请参考以下文章
使用 Jquery $.ajax 在 Flask 上调用服务器端函数 [重复]
前端与后端的数据交互(jquery ajax+python flask)
前端与后端的数据交互(jquery ajax+python flask)