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 相关文章推荐
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
JS实现页面数据懒加载
Feb 13 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP 采集心得技巧
2009/05/15 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
使用Javascript简单计算器
2018/11/17 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python3安装Pymongo详细步骤
2017/05/26 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
女生节标语
2014/06/26 职场文书
医德医魂心得体会
2014/09/11 职场文书
庆六一宣传标语
2014/10/08 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2014财务年终工作总结
2014/12/08 职场文书
作文评语怎么写
2014/12/25 职场文书
考试作弊检讨书
2015/01/27 职场文书
歌咏比赛主持词
2015/06/29 职场文书