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文件夹，然后加载它：
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
或是从CDN加载（你可能需要更换其他站点提供的CDN资源）：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
2、设置url变量
在jQuery里没法使用url_for函数获取地址，所以我们使用request设置一个动态的全局变量：
<script type=text/javascript>
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
两个输入框，一个按钮：
<h1>Add Two Number</h1> <p> <input type="text" size="5" name="a"> + <input type="text" size="5" name="b"> = <span id="result">?</span> </p> <button id="calculate">Calculate!</button>
3、使用getJSON方法发送和获取数据
<script type=text/javascript>
$(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;
});
});
</script>
$.getJSON(url, data, func)发送一个GET请求，其中url是你要处理数据的视图函数的url，data是返回的数据，func是处理数据的函数。
JSON是JavaScript Object Notation（JavaScript对象表示法）的缩写，一种数据格式，形态上类似Python的字典，以键值对的形式存储数据（符号也是大括号）。
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
相关文章
本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了，这个版本是可能对你现有的项目产生太大的影响，因为没有引入太多许多重大更改。2016-06-06
这篇文章主要介绍了jQuery实现点击图标div循环放大缩小功能,这是一个很常见很基础的功能，下面小编通过实例代码给大家介绍，需要的朋友可以参考下2018-09-09![jQuery 练习[二] jquery 对象选择器(1)](//img.jbzj.com/images/xgimg/bcimg2.png)
根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2") ，jquery 对象选择器是jquery的一个亮点。2010-05-05
这篇文章主要为大家详细介绍了jQuery实现图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了jQuery实现获取元素索引值index的方法,涉及jQuery针对页面元素的遍历,index索引操作及属性操作相关技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery发请求传输中文参数乱码问题的解决方案,需要的朋友可以参考下2018-05-05
本文给大家分享的是jQuery中的end()的定义和使用方法及示例，非常简单实用，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要介绍了jQuery动态星级评分效果实现方法,涉及jquery动态操作页面元素样式的相关技巧,效果华丽大气,是一款非常优秀的特效源码,需要的朋友可以参考下2015-08-08
用jQuery做网页换肤确实是很一个很巧妙，很好的选择，这是本人在学习jQuery中学的知识，感觉很有用，写了下来，希望大家有更好的方法或者代码不足的地方请谅解，本人也是初学者啊，希望大家互相勉励互相学习。2011-04-04
这里获得标签名为大写，如:A , DIV，需要的朋友可以参考下2012-07-07
![jQuery 练习[二] jquery 对象选择器(1)](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论