Flask框架——Sijax

上篇文章我们学习了Flask框架——Flask-SQLite数据库,这篇文章我们学习Flask框架——Flask-Sijax。

简单地了解web应用中的同步与异步交互:

同步交互:用户触发某个HTTP请求到服务器,服务器对其进行处理后返回一个新的HTML网页响应到客户端,在服务器返回响应前,客户端只能空闲等待,即使是一次很小的交互、只需从服务器端返回一个很简单的数据,都要返回一个完整的HTML网页来展示,而用户每次都要浪费时来读取整个页面。

异步交互:浏览器不必等待服务器返回结果,在服务器响应的时间内,客户端仍可以继续做其他的事情。

AJAX全名为:Asynchronous Javascript And XML(异步JavaScript和XML)是与服务器交换数据的技术,它在不需要刷新全部页面的情况下,实现了对部分网页的数据更新,快速回应用户的操作。

Flask-Sijax

通过Flask-Sijax可以将Sijax添加到我们的Flask程序中,Flask-Sijax安装方法很简单,执行如下代码:

pip install flask-sijax

Sijax代表’Simple Ajax’,它是一个Python/jQuery库,可以通过Sijax将Ajax引入到web应用程序。 它使用jQuery.ajax来发出AJAX请求。

在Sijax中最重要和最常用的是Sijax.request(),其语法格式为:

Sijax.request('function_name',[参数列表],{jQuery.ajax附加参数})

其中:

  • function_name:必填,指定要调用的函数;
  • 参数列表:可填,传递的参数;
  • jQuery.ajax附加参数:允许覆盖Sijax用来调用jQuery.ajax的一些参数。

例如:

Sijax.request('function_name');     #调用不带参数的函数
Sijax.request('function_name',['arg1,....,argn']); #调用带参数的函数
Sijax.request('function_name',[],{'timeout':1500}); #调用不带参数的函数,告诉底层jQuery.ajax使用1.5秒的超时时间

接下来我们通过Flask程序来演示如何使用Flask-Sijax。

初始化配置

在安装Flask-Sijax的过程中,json2.js会被默认安装到Flask项目目录中的static/js/sijax中,如下图所示:



Sijax使用JSON在浏览器和服务器之间传递数据,因此,浏览器需要本地支持JSON或从json2.js文件获得JSON支持,Flask程序配置如下所示:

import flask_sijax
from flask import Flask, g, render_template
import os
from flask_sijax import sijax
app = Flask(__name__)

path=os.path.join('.',os.path.dirname(__file__),'static/js/sijax')      #json2.js文件路径       
app.config['SIJAX_STATIC_PATH']=path                            #配置sijax静态文件路径
app.config['SIJAX_JSON_URI'] = '/static/js/sijax/json2.js'        #加载json2.js静态文件的url
flask_sijax.Sijax(app)                                      #添加Sijax

if __name__ == '__main__':
    app.run(debug=True)

首先配置sijax静态文件的路径,然后配置加载json2.js静态文件,为了Flask程序能够使用Sijax,所以需要使用flask_sijax添加Sijax到我们的Flask程序。

处理Sijax请求

要是视图函数能够处理Sijax请求,有两种方法:

1、在路由装饰器中,添加POST请求方法:

 @app.route('/url',methods = ['GET','POST'])

2、使用辅助装饰器:

 @flask_sijax.route(app,'视图函数名')

视图函数示例代码如下所示:

@flask_sijax.route(app,'/hello')        #使用辅助装饰器来处理Sijax请求
def hello():
    def say_hi(response):               #定义say_hi函数
        response.alert('成功使用Sijax!')    #弹出警示框
    if g.sijax.is_sijax_request:            #判断是否请求为sijax请求
        g.sijax.register_callback('say_hi',say_hi)      #是sijax请求就调用say_hi函数
        return g.sijax.process_request()            #Sijax执行hello函数并将响应返回给浏览器
    return render_template('my.html')       #使用render_template()方法渲染my.html

首先我们通过辅助装饰器让使视图函数hello能够处理sijax请求,再自定义say_hi函数,其作用是弹出警示框。通过sijax.is_sijax_request方法判断是否请求为sijax请求,是sijax请求通过sijax.register_callback()方法调用say_hi函数,使用sijax.process_request()方法执行hello函数并响应返回给浏览器。

注意:g相当于单次请求中的“全局变量”,能在单次请求中调用,但是和其他请求是互相隔离的,随着本次请求结束而销毁;

my.html模板文件代码如下所示:

<html>
<head>
{#  调用百度的jQuery加速  #}
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
{#  安装Flask-sijax时默认安装的sijax.js #}
<script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
{#  使用过滤器safe禁止转译sijax.get_js()值 #}
<script type="text/javascript"> {{ g.sijax.get_js()|safe }} </script>
</head>
<body>
    <a href="javascript://" onclick="Sijax.request('say_hi');">点击</a>
</body>
</html>

这里我们调用了百度的jQuery加速,并调用了静态文件夹中的sijax.js文件,使用过滤器safe禁止专业sijax.get_js()值。

在超链接a标签中,添加了点击事件,当点击会使用不带参数的Sijax.request()方法调用say_hi函数发出Sijax请求。

启动Flask程序,访问http://127.0.0.1:5000/hello,如下图所示:


其中:jquery.min.js是我们调用了百度jQuery产生的;sijax.js是我们调用本地静态文件中的sijax.js产生的;

当我们点击后,就会弹出警示框,如下图所示:



查看最后一个hello请求,如下图所示:




其中sijax_rq为我们请求的函数,sijax_args为我们请求传递的参数,由于我们调用不带参数的Sijax.request()方法。

这样就成功在不刷新网页的请求下,发送了sijax请求并获得了响应。

获取表单数据

那么当我们需要在不刷新网页的请求下,获取表单的数据发送sijax请求时,可以使用sijax中的Sijax.getFormValues()方法,其语法格式为:

Sijax.getFormValues(jQuery_selector)

这里我们使用上面的视图函数代码,而my.html模板文件代码修改为:

<html>
<head>
{#  调用百度的jQuery加速  #}
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
{#  安装Flask-sijax时默认安装的sijax.js #}
<script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
{#  使用过滤器safe禁止转译sijax_get_js() #}
<script type="text/javascript"> {{ g.sijax.get_js()|safe }} </script>
</head>
<body>
{# 创建id为my_form的表单 #}
<form id="my_form">
    <input type="text" name="textbox" value="textbox 1" />
    <input type="text" name="tbx[nested]" value="tbx 2" />
    <input type="checkbox" name="cbx" checked="checked" />
</form>
{# 使用Sijax.getFormValues方法获取id为my_form的表单数据 #}
<script type="text/javascript">
    var values = Sijax.getFormValues('#my_form');
</script>
{# 使用带参数Sijax.request()方法传递values值 #}
<a href="javascript://" onclick="Sijax.request('say_hi',values);">点击</a>
</body>
</html>

修改my.html模板文件后,启动Flask程序,访问http://127.0.0.1:5000/hello点击后,如下图所示:

这时sijax_args参数就有数据了。

注意:当表单中的字段缺少name名称或被禁用,sijax.getFormValues是无法获取到的。

好了,Flask框架——Flask-Sijax的知识就讲到这里了,感谢观看,下篇文章学习Flask框架——项目可安装化。
公众号:白巧克力LIN

该公众号发布Python、数据库、Linux、Flask、自动化测试、Git等相关文章!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容