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

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

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

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

载入 jQuery

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

标签的最下方新增一个 script 标签。

另一个载入 jQuery 的技巧是使用 Google 的 AJAX Libraries API :http://code.google.com/apis/ajaxlibs/documentation/

window.jQuery || document.write(\'\\x3C/script>\')

在以上配置的情况下，您需要将 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 足以在这里完成正确的事情，他将会为您过滤掉斜杠({{ ""|tojson|safe }} 将会被渲染成 "")。

JSON 检视函式

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

from flask import Flask, jsonify, render_template, request

app = Flask(__name__)

@app.route(\'/_add_numbers\')

def add_numbers():

a = request.args.get(\'a\', 0, type=int)

b = request.args.get(\'b\', 0, type=int)

return jsonify(result=a + b)

@app.route(\'/\')

def index():

return render_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);

});

return false;

});

});

jQuery Example

+

=

?

calculate server side

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

$(function() { ... }) 将会在浏览器载入完页面的基础内容之后立即执行。$(\'selector\') 选择一个用于操作的元素。element.bind(\'event\', func) 指定元素被单击时执行的函式，如果这个函式返回 false ，那么单击操作的预设行为将被取消。在本例中，点选操作的预设行为是导航到 # 连结标签。$.getJSON(url, data, func) 传送一个 GET 请求给 url ，其中 data 物件的内容将以查询引数的形式传送。一旦资料抵达，它将以返回值作为引数执行给定的函式。请注意，我们在这里可以使用我们先前设定的 $SCRIPT_ROOT 变数。如果您还没有完全了解这个例子，可以从 github 上下载 本例源代码：http://github.com/mitsuhiko/flask/tree/master/examples/jqueryexample。

有需要前端学习资料的同学可以私行小编“学习”，获取学习资料一起交流学习