Flask框架——Sijax

框架 · 2026-06-05 13:04

简单地了解web应用中的同步与异步交互：同步交互：用户触发某个HTTP请求到服务器，服务器对其进行处理后返回一个新的HTML网页响应到客户端，在服务器返回响应前，客户端只能空闲等待，即使是一次很小的交互、只需从服务器端返回一个很简单的数据，都要返回一个完整的HTML网页来展示，...

简单地了解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模板文件代码如下所示：

在超链接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是无法获取到的。