jQuery实现Ajax功能分析【与Flask后台交互】

2023-08-22 11:01:05 151

本文实例讲述了jQuery实现Ajax功能。分享给大家供大家参考，具体如下：

jQuery是一个小型的JavaScript库，它通常被用来简化DOM和JavaScript操作。通过在服务器和客户端之间交换JSON数据是使得Web应用动态化的完美方式。

JSON本身是一个很清量级的数据传输格式，非常近似于Python的原始数据类型(数字、字符串、字典和链表等)，这一数据格式被广泛支持，而且非常容易解析。它几年前开始流行，然后迅速取代了XML在Web应用常用数据传输格式中的地位。

如果您使用Python2.6以上版本，JSON的解析库是开箱即用的。在Python2.5中您则必须从PyPI安装simplejson库。

加载jQuery

为了使用jQuery您需要先下载它，然后将其放置在您应用的静态文件夹中，并确认他被加载了。理想的情况下是，您有一个用于所有页面的布局模板。要加载jQuery您只需要在这个布局模板中标签的最下方添加一个script标签。

另一个加载jQuery的技巧是使用Google的AJAXLibrariesAPI :

在以上配置的情况下，您需要将jQuery放置到静态文件夹当中作为一个备份。浏览器将会首先尝试直接从Google加载jQuery。如果您的用户至少一次访问过使用Google提供的的jQuery版本的话，浏览器就会缓存这个代码，这样您的网站就可以从中获得加载更快的好处了。

我的站点在哪?

您知道您的应用在哪里运行么？如果您在开发过程当中，那么答案非常简单:它运行在本地端口，而且就在这个URL的根路径位置。但是如果您后来决定将您的应哟ing移动到一个不同的未知怎么办？比如http://example.com/myapp？在服务器这边，这从来不是一个问题，原因是我们使用的url_for()函数可以帮我们回答这个问题。但是如果我们在使用jQuery我们不应该将指向应用的路径硬编码到程序中，而是将它动态化。该如何做到这点呢？

一个简单的技巧可能是为我们的页面添加一个script标签，然后设定一个全局变量作为一个应用根路径的前缀。如下所示:


$SCRIPT_ROOT={{request.script_root|tojson|safe}};

这里的|safe是必要的。这样Jinja才不会将JSON编码的字符串以HTML的规则过滤处理掉。通常这种过滤是必要的，但是在script标签块当中有着不同于原先的过滤规则。

可能有用的信息

在HTML中，script标签被声明为CDATA。这意味着HTML转义实体将不会被解析。在出现之前的所有内容都被当做脚本处理。这也意味着在script标签的内容之中不应该出现"|tojson|safe}}将会被渲染成"<\/script>")。

JSON视图函数

现在让我们创建一个服务端函数，这个服务端函数接收两个数字形式的URL参数，然后将这两个数字相加并以JSON对象的形式返回给应用。这是一个相当可笑的例子，您通常会在服务端直接实现这个功能。但是这是一个方便展示如何配合使用jQuery和Flask最简单的例子了:

fromflaskimportFlask,jsonify,render_template,request
app=Flask(__name__)
@app.route('/_add_numbers')
defadd_numbers():
a=request.args.get('a',0,type=int)
b=request.args.get('b',0,type=int)
returnjsonify(result=a+b)
@app.route('/')
defindex():
returnrender_template('index.html')

正如您所见，我们在这里添加了一个index函数，这个函数用于渲染一个模板。这个模板将会按照上面的提供的方法加载jQuery，并且包含一个小表单用于提供加法运算的两个数，同时表单还提供了用于激发服务器端函数的一个链接。

注意，这里我们使用不会抛出错误的get()方法。如果对应的键不存在，一个默认值(这里是0)将hi被返回。更进一步，我们还可以将值转换为一个特定类型(就像我们这里的int类型)。这对于由脚本(APIs,JavaScript等)激发的代码来说是个非常顺手的工具，因为在这种情况下您不需要特别的错误报告。

HTML部分

您的index.html要么继承一个已经加载了jQuery且设定了$SCRIPT_ROOT环境变量的layout.html模板，要么自己在上方完成了这些事。以下是我们的小应用(index.html)所需的HTML代码。请注意这里我们也将脚本直接写入了HTML。通常来讲，将脚本代码放置到一个独立的脚本文件里是一个更好的点子。


$(function(){
$('a#calculate').bind('click',function(){
$.getJSON($SCRIPT_ROOT+'/_add_numbers',{
a:$('input[name="a"]').val(),
b:$('input[name="b"]').val()
},function(data){
$("#result").text(data.result);
});
returnfalse;
});
});

jQueryExample
+
=
?
calculateserverside

我们不会过多介绍jQuery使用的细节，仅仅对以上代买做一个快速的解释:

$(function(){...})将会在浏览器加载完页面的基础内容之后立即执行。
$('selector')选择一个用于操作的元素。
element.bind('event',func)指定元素被单击时运行的函数，如果这个函数返回false，那么单击操作的默认行为将被取消。在本例中，点击操作的默认行为是导航到#链接标签。
$.getJSON(url,data,func)发送一个GET请求给url，其中data对象的内容将以查询参数的形式发送。一旦数据抵达，它将以返回值作为参数执行给定的函数。请注意，我们在这里可以使用我们先前设定的$SCRIPT_ROOT变量。

如果您还没有完全了解这个例子，可以从github上下载本例源码。

更多关于jQuery相关内容可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现Ajax功能分析【与Flask后台交互】

jQueryExample

热门推荐

随机推荐