相思资源网 Design By www.200059.com

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

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

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

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

加载 jQuery

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

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

另一个加载 jQuery 的技巧是使用 Google 的 AJAX Libraries API :

<script src="/UploadFiles/2021-04-02/jquery.js">

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

我的站点在哪"color: #0000ff">http://example.com/myapp ? 在服务器这边,这从来不是一个问题,原因是我们使用的 url_for() 函数可以帮我们回答这个问题。但是如果我们在使用 jQuery 我们不应该将指向应用的路径硬编码到程序中,而是将它动态化。该如何做到这点呢?

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

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

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

可能有用的信息

在 HTML 中, script 标签被声明为 CDATA 。这意味着 HTML 转义实体将不会被解析。在 </script> 出现之前的所有内容都被当做脚本处理。这也意味着在 script 标签的内容之中不应该出现 </ 字样。|tojson 足以在这里完成正确的事情,他将会为您过滤掉斜杠({{ "</script>"|tojson|safe }} 将会被渲染成 "<\/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)将hi被返回。更进一步,我们还可以将值转换为一个特定类型(就像我们这里的 int 类型)。这对于由脚本(APIs,JavaScript等)激发的代码来说是个非常顺手的工具,因为在这种情况下您不需要特别的错误报告。

HTML 部分

您的 index.html 要么继承一个已经加载了 jQuery 且设定了 $SCRIPT_ROOT 环境变量的 layout.html 模板,要么自己在上方完成了这些事。以下是我们的小应用 (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>"_blank" href="http://github.com/mitsuhiko/flask/tree/master/examples/jqueryexample" rel="external nofollow" >本例源码

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

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

标签:
jQuery,Ajax,Flask,交互

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无jQuery实现Ajax功能分析【与Flask后台交互】的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?