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文件夹，然后加载它：

rush:js;">

2、设置url变量

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

rush:js;">

两个输入框，一个按钮：

rush:js;">

Add Two Number

culate">Calculate!

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

rush:js;">

$.getJSON(url,data,func)发送一个GET请求，其中url是你要处理数据的视图函数的url，data是返回的数据，func是处理数据的函数。

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

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

rush:js;"> from flask import Flask,jsonify,render_template,request app = Flask(__name__) @app.route('/calculate') def add_numbers(): a = request.args.get('a',type=int) # 第二个参数作为默认值 b = request.args.get('b',type=int) return jsonify(result=a + b) @app.route('/') def index(): return render_template('index.html')

使用Flask提供的jsonify()函数返回JSON数据。

这个例子改编自Flask官方的例子，完整的源码见：

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。