0.前言
    近期因为某种原因再次学习Flask框架。借助博客整理相关内容。Flask框架和Apache+PHP存在少许不同，Flask框架中JS和CSS文件存放于一个相对固定的位置。

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

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

    这个样例将执行在树莓派中，请注意windows平台和linux平台也能够执行该演示样例，python具有良好的跨平台性能。

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

    【相关博文】
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 前端页面

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHVrYWk4NzExMDU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

图3 后台调试输出

python Flask JQuery使用说明的更多相关文章

  1. 前端和后端的数据交互(jquery ajax+python flask+mysql)

    上web课的时候老师布置的一个实验,要求省市连动,基本要求如下: 1.用select选中一个省份. 2.省份数据传送到服务器,服务器从数据库中搜索对应城市信息. 3.将城市信息返回客户,客户用sele ...

  2. 细数Python Flask微信公众号开发中遇到的那些坑

    最近两三个月的时间,断断续续边学边做完成了一个微信公众号页面的开发工作.这是一个快递系统,主要功能有用户管理.寄收件地址管理.用户下单,订单管理,订单查询及一些宣传页面等.本文主要细数下开发过程中遇到 ...

  3. Python Flask 在Sina App Engine (SAE)上安家

    早就听说了Python的大名,随着的编程语言的理解加深,越发认为动态语言的威力--真大呀. 趁这段时间不忙,我也用Python写了一个应用,而且将其部署到Sina App Engine (SAE).S ...

  4. Python+Flask+MysqL的web技术建站过程

    1.个人学期总结 时间过得飞快,转眼间2017年就要过去.这一年,我学习JSP和Python,哪一门都像一样新的东西,之前从来没有学习过. 这里我就用我学习过的Python和大家分享一下,我是怎么从一 ...

  5. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  6. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  7. [Python] Flask从0到1开发轻量级网页

    概述 Flask采用MVT模型,即Model, Template, View Model:定义数据的存储格式,并且提供了数据库访问的API View:定义那些数据被显示,是业务逻辑处理模块 Templ ...

  8. 实验8、31个最重要的Python Flask面试问题和答案

    实验介绍 1. 实验内容 内容涵盖了31个最热门的Flask面试问题,帮助学生更好的理解Flask. 2. 实验要点 了解面试Flask开发人员的常见问题 实验内容 Flask面试问答 Q:Flask ...

  9. 【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https

    问题描述 在上篇博文"[Azure 应用服务]App Service for Linux 中实现 WebSocket 功能 (Python SocketIO)"中,实现了通过 HT ...

随机推荐

  1. Hardwood Species（map）

    http://poj.org/problem?id=2418 题意:给定一系列字符串,要求按字典序升序输出每个串,并输出每个串出现的百分比. 用map做的,交c++A了,G++ WA..so sad. ...

  2. python请求服务器图片并下载到本地磁盘

    >>> import os >>> os.getcwd() 'C:\\Python33' >>> os.chdir('E:\\python\\mm ...

  3. 阿里云 CentOS 6.5 使用XAMPP 搭建LAMP环境

    LAMP环境是常见的服务器环境,也是PHP网站常用的服务器环境,很多人喜欢手动配置,但是手动配置LAMP复杂.麻烦,简单一点的话可以使用集成环境.试了下LNMP的集成环境,用不习惯,另外由于本地一直使 ...

  4. Ubuntu1804安装Postgresql【转】

    转载自:https://huur.cn/course/yw/1591.html 关系数据库管理系统是许多网站和应用程序的关键组成部分.它们提供了一种结构化的方式来存储,组织和访问信息. Postgre ...

  5. 魅族和三星Galaxy 5.0webView 问题Android Crash Report - Native crash at /system/lib/libc.so caused by webvi

    解决办法是当前activity 销毁的时候 webView.destroy(); hine: ConnectedState (when=-2ms what= arg1=!CMD_RSSI_POLL : ...

  6. 1、Visual Studio Code安装及Hello Word

    一.环境初始化 1.下载 Visual Studio Code对应版本安装 2.下载.NET Core 2.0 SDK安装 3.安装Mono Debug   完成后界面如下:       二.创建控制 ...

  7. Hive2.1.1集群搭建

    软件环境: linux系统: CentOS6.7 Hadoop版本: 2.6.5 zookeeper版本: 3.4.8 主机配置: 一共m1, m2, m3这五部机, 每部主机的用户名都为centos ...

  8. AI：AI是什么？

    古老的哲学对科学有永远的借鉴意义,科学上的咬文嚼字往往会让其丧失完备性. 一.AI是什么 你看起来它有多好,它就有多好.本质只能通过表象来描述,在色即是空的逻辑里,图灵测试也许是最精准的AI测试方式. ...

  9. ASP.NET MD5加密

    protected void Button1_Click(object sender, EventArgs e) { string pwd = TextBox2.Text.Trim(); Respon ...

  10. fiddler抓包 IOS11以上系统

    想要使用fiddler对iphone X进行抓包,按照以前的配置方法,走一遍.还是抓不成,原来是因为IOS11操作系统中,安装完证书之后,还需要再手动信任证书才能正常抓包. 以下内容来自:https: ...