AJAX with jQuery ¶

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

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

加载jQuery ¶

为了使用 jQuery 您需要先下载它，然后将其放置在您应用的静态文件夹中，并确认他被加载了。理想情况下，您有一个布局模板，用于所有页面，您只需要在<body>底部添加一个脚本语句来加载jQuery：

<script type=text/javascript src="{{
  url_for('static', filename='jquery.js') }}"></script>

另一种方法是使用Google的AJAX库API加载jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{
  url_for('static', filename='jquery.js') }}">\x3C/script>')</script>

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

我的网站在哪里？¶

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

一个简单的技巧可能是为我们的页面添加一个 script 标签，然后设定一个全局变量作为一个应用根路径的前缀。这样的东西：

<script type=text/javascript>
  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

在0.10之前的Flask中，|safe是必需的，因此Jinja不会使用HTML规则转义JSON编码的字符串。通常这是必要的，但我们在script块中，这里应用不同的规则。

可能有用的信息

在HTML中，script标记被声明为CDATA，这意味着实体不会被解析。在 </script> 出现之前的所有内容都被当做脚本处理。这也意味着在 script 标签的内容之中不应该出现 </ 字样。 |tojson 足以在这里完成正确的事情，他将会为您过滤掉斜杠({% templatetag openvariable %} "</script>"|tojson|safe {% templatetag closevariable %} 将会被渲染成 "<\/script>")。

这意味着 HTML 转义实体将不会被解析。这使得Flask可以自动将结果标记为HTML安全。

JSON视图函数¶

现在让我们创建一个服务端函数，这个服务端函数接收两个数字形式的 URL 参数，然后将这两个数字相加并以 JSON 对象的形式返回给应用。这是一个相当可笑的例子，您通常会在服务端直接实现这个功能。

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加载的layout.html模板和$ SCRIPT_ROOT变量集，或者在顶部进行。这是我们的小应用程序（index.html）所需的HTML代码。请注意这里我们也将脚本直接写入了 HTML。通常来讲，将脚本代码放置到一个独立的脚本文件里是一个更好的点子。

<script type=text/javascript>
  $(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;
    });
  });
</script>
<h1>jQuery Example</h1>
<p><input type=text size=5 name=a> +
   <input type=text size=5 name=b> =
   <span id=result>?</span>
<p><a href=# id=calculate>calculate server side</a>

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

$(function() { ... }) 将会在浏览器加载完页面的基础内容之后立即执行。
$('selector') 选择一个用于操作的元素。
element.bind('event', func) 指定用户单击元素后，会运行的函数。如果函数返回 false, 其默认的行为会不会进行（在这种情况下，会导航到# URL).
$。getJSON（url， data， func）发送GET url，并且将发送数据对象的内容作为查询参数。一旦数据抵达，它将以返回值作为参数执行给定的函数。请注意，我们在这里可以使用我们先前设定的 $SCRIPT_ROOT 变量。

如果你没有得到整个图片，请从GitHub下载这个例子的源代码。

AJAX with jQuery ¶

加载jQuery ¶

我的网站在哪里？¶

JSON视图函数¶

HTML ¶

目录

相关主题

本页