jq发送动态变量_使用AJAX和jQuery动态加载数据

什么是AJAX？

这里的AJAX不是希腊神话里的英雄，也不是清洁剂品牌，更不是一门语言，而是指异步Javascript和XML(Asynchronous JavaScript And XML)，这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON。简单的说，就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式)，使用JavaScript处理数据并更新页面内容。

为什么要使用AJAX？

借助AJAX，我们可以实现：在不重载页面的情况下，向服务器发送请求；

动态加载数据，即在后台交换数据。

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

AJAX让Web APP更像是APP。

使用jQuery实现AJAX

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

1、加载jQuery

把jQuery放到static文件夹，然后加载它：

或是从CDN加载(你可能需要更换其他站点提供的CDN资源)：

2、设置url变量

在jQuery里没法使用url_for函数获取地址，所以我们使用request设置一个动态的全局变量：

$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

这个变量($SCRIPT_ROOT)代表你的程序根地址，相当于“/”。比如在本地，它就是“http://127.0.0.1”。

两个输入框，一个按钮：

Add Two Number

+

=

?

Calculate!

3、使用getJSON方法发送和获取数据

$(function() {

$('a#calculate').bind('click', function() {

$.getJSON($SCRIPT_ROOT + '/calculate', {

a: $('input[name="a"]').val(),

b: $('input[name="b"]').val()

}, function(data) {

$("#result").text(data.result);

});

return false;

});

});

$.getJSON(url, data, func)发送一个GET请求(发送POST请求可以使用post()方法，具体见文档)，其中url是你要处理数据的视图函数的url，data是返回的数据，func是处理数据的函数。

JSON是JavaScript Object Notation(JavaScript对象表示法)的缩写，一种数据格式，形态上类似Python的字典，以键值对的形式存储数据(符号也是大括号)。动态URL

在模板里，使用url_for函数可以方便的传入动态的变量，但这里没法用，需要一些别的技巧。以社交网站的关注功能为例，实现关注功能的视图函数需要用户实例的id作为参数，有两种情况。

1、单个用户(单个关注按钮)

比如说某个用户的资料页上的关注按钮，用户实例作为参数传入模板，所以我们可以直接使用Jinja变量：

$SCRIPT_ROOT + '/follow/{{ user. id }}'2、多个用户(多个关注按钮)

这个类似用户的关注列表，这时情况要复杂一点，因为没有一个全局用户变量，每个用户都有一个关注按钮。这时可以使用HTML5的data*属性来把每个用户的id存储到相应的关注按钮里，然后在按下按钮时取到相应的id值。

关注按钮：

关注使用jQuery获取id值：

$('.follow-btn').click(function() {

var id = $(this).data('id');

})然后URL就是：

$SCRIPT_ROOT + '/follow/' + id

4、获取、处理并返回JSON数据的视图函数

from flask import Flask, jsonify, render_template, request

app = Flask(__name__)

@app.route('/calculate')

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')

使用Flask提供的jsonify()函数返回JSON数据。这个例子改编自Flask官方的例子，完整的源码见：https://github.com/pallets/flask/blob/master/examples/jqueryexample

更完整的例子

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

相关链接

- - - - -

更多关于Flask和Web开发的优质原创内容，欢迎关注Hello, Flask! - 知乎专栏。