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


Posted in Javascript onDecember 05, 2016

什么是AJAX?

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

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

为什么要使用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

Javascript 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 #Javascript
解析预加载显示图片艺术
Dec 05 #Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 #Javascript
简单几步实现返回顶部效果
Dec 05 #Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 #Javascript
jquery删除数组中重复元素
Dec 05 #Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 #Javascript
You might like
VFP与其他应用程序的集成
2006/10/09 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
js自带函数备忘 数组
2006/12/29 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python生成随机密码的方法
2017/06/16 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
详解Python字典小结
2018/10/20 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
Python连接mysql方法及常用参数
2020/09/01 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
C#笔试题和英文面试题
2013/02/07 面试题
文员岗位职责
2013/11/09 职场文书
大学生志愿者感言
2014/01/15 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
太太口服液广告词
2014/03/20 职场文书
物资采购方案
2014/06/12 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
Django中的JWT身份验证的实现
2021/05/07 Python