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

本文实例讲述了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="{{
 url_for('static', filename='jquery.js') }}"></script>

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

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

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

我的站点在哪?

您知道您的应用在哪里运行么？如果您在开发过程当中，那么答案非常简单: 它运行在本地端口，而且就在这个 URL 的根路径位置。但是如果您后来决定将您的应哟ing移动到一个不同的未知怎么办？比如 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>?</span>
<p><a href=# id=calculate>calculate server side</a>

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

  1. $(function() { ... }) 将会在浏览器加载完页面的基础内容之后立即执行。
  2. $('selector') 选择一个用于操作的元素。
  3. element.bind('event', func) 指定元素被单击时运行的函数，如果这个函数返回 false ，那么单击操作的默认行为将被取消。在本例中，点击操作的默认行为是导航到 # 链接标签。
  4. $.getJSON(url, data, func) 发送一个 GET 请求给 url ，其中 data 对象的内容将以查询参数的形式发送。一旦数据抵达，它将以返回值作为参数执行给定的函数。请注意，我们在这里可以使用我们先前设定的 $SCRIPT_ROOT 变量。

如果您还没有完全了解这个例子，可以从 github 上下载 本例源码 。

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

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

赞 (0)

相关推荐

  • jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码 代码如下: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script>

  • jquery的ajax()函数传值中文乱码解决方法介绍

    复制代码 代码如下: $.ajax({ dataType : 'json',type : 'POST',url : 'http://localhost/test/test.do',data : {id: 1, type: '商品'},success : function(data){ } } ); 问题: 提交后后台action程序时,取到的type是乱码 解决方法: 方法一:提交前采用encodeURI两次编码,记住一定是两次 1.修改以下代码 复制代码 代码如下: data:{id:1, t

  • jquery ajax 向后台传递数组参数示例

    需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放任何类型(对象.基本类型),但是如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串--[object Object],原因如下: 在后台接收的时候,只能用request来接收,request.getParameterValues()方法返回的是一个String[],所以,应该是在前台传输的时候调用了对象的toString()方法,那么如果依然想传递对象怎么办?凉拌! 但是可以使用JSON字符串来实现,在后台把JSO

  • jQuery Ajax异步处理Json数据详解

    先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){  $.getJSON("demo_ajax_json.js",function(result){    $.each(result, function(i, field){      $("div").append(field + " ");    });  });

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • jquery中ajax处理跨域的三大方式

    由于JS同源策略的影响,因此js只能访问同域名下的文档.因此要实现跨域,一般有以下几个方法: 一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受,*/ header("Access-Control-Allow-Methods:G

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • JQuery AJAX提交中文乱码的解决方案

    JQuery AJAX提交中文乱码的解决方案

    现象如下: 1)在Firefox下,处理页面的编码为gb2312,提交数据没有问题,中文能够正确解析: 2)在IE8下,处理页面的编码为gb2312,提交中文数据出现乱码. 无论是$.post还是$.ajax,抑或$.ajaxSubmit(来自于Form插件),在之前的UTF-8编码的网站都没有出现过任何问题, 看来是由于提交数据的网页的编码格式造成的了.不管怎么样,既然是浏览器之间存在差异,还是从HTTP包来看有什么问题吧. 打开Fiddle,分别用Firefox和IE做一个AJAX提交(以用

  • jquery ajax例子返回值详解

    在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 首先我们看$.get(): 复制代码 代码如下: $.get("test.jsp", { name: "cssrain", time: "2008/01/21" }, //要传递的数据 function(data){ alert("返回的数据: " + data); } ) 然后看$.post(): 跟$.get()格式一样.

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

随机推荐