AJAX和jQuery动态加载数据的实现方法

什么是AJAX？

这里的AJAX不是希腊神话中的英雄，也不是洗涤剂品牌，更不是语言，而是指异步Javascript和XML，其中XML(数据格式)也可以是纯文本或JSON。简单来说，XMLHttpRequest对象用于与服务器交换数据(以XML或JSON格式)，JavaScript用于处理数据和更新页面内容。

为什么要使用AJAX？

使用AJAX，我们可以实现：

向服务器发送请求，而不重新加载页面；

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

例如，在便利贴应用程序中，当您填写表单并单击“新建”时，将不会有页面跳转，内容将立即更新，数据将在后台写入数据库。

AJAX让Web APP更像APP。

用jQuery实现AJAX

使用jQuery来简化这个过程。下面是一个简单的例子：在两个输入框中输入数字，按下计算按钮，JavaScript发送数据，在服务器(view函数)获取数据，返回两个数字相加的结果，JavaScript获取返回的数据并显示在页面上。

1.加载jQuery

将jQuery放入静态文件夹并加载：

脚本src=' http : { { URL _ for(' static '，filename=' jquery . js ')} } '/脚本或从CDN加载(您可能需要替换其他站点提供的CDN资源):

script src=' http :http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 4 . 2/jquery . min . js '/script 2，设置url变量

您不能使用url_for函数来获取jQuery中的地址，所以我们使用request来设置一个动态全局变量：

SCRIPT type=text/JavaScript $ SCRIPT _ ROOT={ { request . SCRIPT _ ROOT | to JSON | safe } }；/编写两个输入框和一个按钮的脚本：

h1Add Two Number/h1pinput类型='text' size='5' name='a '输入类型=' text ' size=' 5 ' name=' b '=span id=' result '？/span/pbutton id=“计算”计算！/button3。使用getJSON方法发送和获取数据

脚本类型=text/JavaScript $(function(){ $(' a # calculate '))。bind('click '，function() {$)。getJSON($ SCRIPT _ ROOT '/calculate '，{a: $('input[name='a']')。val()，b: $('input[name='b']')。val()}，函数(数据){$('#result ')。文本(数据.结果)；});返回false});});/script$。GETJSON(url，data，func)发送get请求，其中url是您想要处理数据的view函数的url，data是返回的数据，func是处理数据的函数。

JSON是JavaScript Object notification的缩写，是一种形状类似Python字典的数据格式，以键值对的形式存储数据(符号也是大括号)。

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

从flask导入Flask，jsonify，render_template，request app=Flask(_ name _ _)@ app . route('/calculate ')def add _ numbers(): a=request . args . get(' a '，0，type=int) #使用第二个参数Flask默认值b=request.args.get ('b '，0，type=int)返回jsonify(result=ab)@ app . route('/')def index():返回render _ template ('index.html ')

这个例子改编自Flask的官方例子。完整的源代码可以在：https://github找到。com/托盘/FLASK/blob/主/示例/jQuery示例