带jquery的Ajax

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>

另一种方法是使用谷歌的 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加载它。这样做的好处是,如果用户在使用谷歌相同的jquery版本之前访问了至少一个其他网站,那么您的网站可能会更快地加载,因为它已经在浏览器缓存中了。

我的网站在哪里?

你知道你的申请在哪里吗?如果您正在开发一个非常简单的答案:它位于本地主机端口上,并且直接位于该服务器的根目录上。但是,如果您稍后决定将应用程序移动到其他位置呢?例如 http://example.com/myapp ?在服务器端,这从来都不是问题,因为我们使用的是 url_for() 函数可以回答我们的问题,但是如果我们使用jquery,我们不应该硬编码到应用程序的路径,而是使其成为动态的,那么我们如何做到这一点呢?

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

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

这个 |safe 在flask中0.10之前是必需的,这样Jinja就不会用HTML规则转义JSON编码的字符串。通常这是必要的,但我们在 script 在适用不同规则的地方阻止。

专业人员信息

在HTML中,“script”标签被声明为“CDATA”,这意味着实体不会被解析。在' ' ' '之前的所有内容都作为脚本处理。这也意味着脚本标记之间永远不能有任何' ' <!-- ' '。</span-->' ' |tojson ' '足够在这里做正确的事情,并为您转义斜杠(' ' {{""|tojson|safe}} ' '呈现为' ' "</script>" ' ')。

在flask 0.10中,它更进一步,使用unicode转义来转义所有HTML标记。这使得flask可以自动将结果标记为HTML安全。

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模板必须扩展 layout.html 已加载jquery并设置了“$script_root”变量的模板,或者在顶部执行该操作。这是我们的小应用程序需要的HTML代码( index.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的工作原理,只需简单地解释一下上面的代码:

  1. $(function() {{ ... }}) 指定在浏览器加载完页面的基本部分后应运行的代码。
  2. $('selector') 选择一个元素并允许您对其进行操作。
  3. element.bind('event', func) 指定用户单击元素时应运行的函数。如果函数返回 false, 默认行为将不会启动(在本例中,导航到“url”)。
  4. $.getJSON(url, data, func) 发送一个 GET 请求到 url 并将发送 data 对象作为查询参数。一旦数据到达,它将以返回值作为参数调用给定的函数。注意,我们可以在这里使用前面设置的“$script_root”变量。

查看:gh: ' example source <examples javascript=""> '以获得完整的应用程序,该应用程序演示了这个页面上的代码,以及使用' ' XMLHttpRequest ' '和' ' fetch ' '执行相同的操作.