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