请选择 进入手机版 | 继续访问电脑版
什么是AJAX?

这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XMLAsynchronous JavaScript And XML),这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON。简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容。
使用AJAX和jQuery动态加载数据-1.jpg
图片出处:http://www.w3schools.com/js/js_ajax_intro.asp

为什么要使用AJAX?

借助AJAX,我们可以实现:
    在不重载页面的情况下,向服务器发送请求;
    动态加载数据,即在后台交换数据。

比方说,一个便签本应用,当你在表单里填写好内容,点击新建,这时不会有页面跳转,内容即时更新,数据在后台写入数据库。
AJAX让Web APP更像是APP。


使用jQuery实现AJAX


使用jQuery可以简化这个过程。下面是一个简单的例子,在两个输入框里输入数字,按下计算按钮,JavaScript发送数据,在sever端(视图函数)获取数据,将两个数相加的结果返回,JavaScript获取返回的数据并将其显示在页面上。

1、加载jQuery
把jQuery放到static文件夹,然后加载它:
  1. [/code]或是从CDN加载(你可能需要更换其他站点提供的CDN资源):
  2. [code]
复制代码
2、设置url变量
在jQuery里没法使用url_for函数获取地址,所以我们使用request设置一个动态的全局变量:
  1. [/code]这个变量($SCRIPT_ROOT)代表你的程序根地址,相当于“/”。比如在本地,它就是“http://127.0.0.1”。
  2. 两个输入框,一个按钮:
  3. [code]
复制代码
3、使用getJSON方法发送和获取数据
  1. [/code]
  2. [list]$.getJSON(url, data, func)发送一个GET请求(发送POST请求可以使用post()方法,具体见文档),其中url是你要处理数据的视图函数的url,data是返回的数据,func是处理数据的函数。
  3. JSON是JavaScript Object Notation(JavaScript对象表示法)的缩写,一种数据格式,形态上类似Python的字典,以键值对的形式存储数据(符号也是大括号)。
  4. [/list][quote][b]动态URL[/b]
  5. 在模板里,使用url_for函数可以方便的传入动态的变量,但这里没法用,需要一些别的技巧。以社交网站的关注功能为例,实现关注功能的视图函数需要用户实例的id作为参数,有两种情况。
  6. [b]1、单个用户(单个关注按钮)[/b]
  7. 比如说某个用户的资料页上的关注按钮,用户实例作为参数传入模板,所以我们可以直接使用Jinja变量:
  8. [code]
复制代码
2、多个用户(多个关注按钮)
这个类似用户的关注列表,这时情况要复杂一点,因为没有一个全局用户变量,每个用户都有一个关注按钮。这时可以使用HTML5的data*属性来把每个用户的id存储到相应的关注按钮里,然后在按下按钮时取到相应的id值。
关注按钮:
  1. [/code]使用jQuery获取id值:
  2. [code]
复制代码
然后URL就是:
  1. [/code][/quote]
  2. [b]4、获取、处理并返回JSON数据的视图函数[/b]
  3. [code]
复制代码
使用Flask提供的jsonify()函数返回JSON数据。
这个例子改编自Flask官方的例子,完整的源码见:https://github.com/pallets/flask/blob/master/examples/jqueryexample

更完整的例子

本来打算把上次的待办清单应用作为例子,但是逻辑太复杂,涉及太多不相关的内容。所以我写了一个计算器:https://zhuanlan.wengbi.com/p/24120882

相关链接

    Flask,AJAX with jQuery:http://flask.pocoo.org/docs/0.11/patterns/jquery/
    JSON:http://www.json.org/
    MDN,AJAX:https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
    jQuery,getJSON方法:http://api.jquery.com/jquery.getjson/jQuery,post方法:http://api.jquery.com/jQuery.post/jQuery AJAX分类下的函数:http://api.jquery.com/category/ajax/


- - - - -
更多关于Flask和Web开发的优质原创内容,欢迎关注Hello, Flask! - 知乎专栏。
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 邀请

本版积分规则

Archiver|手机版|小黑屋|翁笔

Powered by Discuz! X3.3 © 2001-2018 Comsenz Inc.

返回顶部