带有 jQuery 的 AJAX

jQuery 是一个小型 JavaScript 库，通常用于简化 DOM 和 JavaScript 的工作。它是通过在服务器和客户端之间交换 JSON 来使 Web 应用程序更具动态性的完美工具。

JSON 本身是一种非常轻量级的传输格式，与 Python 原语（数字、字符串、字典和列表）的外观非常相似，它被广泛支持并且非常容易解析。它在几年前开始流行并迅速取代 XML 作为 Web 应用程序中的传输格式。

加载 jQuery

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

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

另一种方法是使用 Google 的 AJAX Libraries 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 加载它。这样做的好处是，如果用户在使用来自 Google 的相同 jQuery 版本之前至少访问过一个其他网站，则您的网站可能会为用户加载得更快，因为它已经在浏览器缓存中。

我的网站在哪里？

你知道你的应用程序在哪里吗？如果您正在开发，答案很简单：它位于 localhost 端口上，并且直接位于该服务器的根目录上。但是，如果您稍后决定将应用程序移至其他位置，该怎么办？例如http://example.com/myapp？在服务器端，这从来都不是问题，因为我们使用了方便的 url_for() 函数，可以为我们回答这个问题，但是如果我们使用 jQuery，我们不应该对应用程序的路径进行硬编码，而是使其动态化，那我们怎么做呢？

一个简单的方法是向我们的页面添加一个脚本标记，该标记将全局变量设置为应用程序根的前缀。像这样的东西：

<script>
  $SCRIPT_ROOT = {{ request.script_root|tojson }};
</script>

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），则返回。此外，它可以将值转换为特定类型（如我们的例子中的 int）。这对于由脚本（API、JavaScript 等）触发的代码特别方便，因为在这种情况下您不需要特殊的错误报告。

HTML

您的 index.html 模板要么必须使用 jQuery 加载和 $SCRIPT_ROOT 变量集扩展 layout.html 模板，要么在顶部执行此操作。这是我们的小应用程序 (index.html) 所需的 HTML 代码。请注意，我们还将脚本直接放入此处的 HTML 中。将它放在一个单独的脚本文件中通常是一个更好的主意：

<script>
  $(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) 向 url 发送 GET 请求，并将 data 对象的内容作为查询参数发送。一旦数据到达，它将以返回值作为参数调用给定的函数。请注意，我们可以在这里使用我们之前设置的 $SCRIPT_ROOT 变量。

查看 :gh:`示例源 ` 对于演示此页面上的代码的完整应用程序，以及使用相同的内容XMLHttpRequest和fetch .

AJAX 与 jQuery — Flask 文档

带有 jQuery 的 AJAX

加载 jQuery

我的网站在哪里？

JSON 视图函数

HTML