Flask框架——Sijax

2022-07-29 本文已影响0人白巧克力LIN

上篇文章我们学习了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等相关文章！

Flask框架——Sijax

Flask-Sijax

初始化配置

处理Sijax请求

获取表单数据

猜你喜欢

热点阅读