做网站哪里买空间好/广州seo关键词优化外包
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, 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 后台调试输出
