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 页面只自动刷新一次
Jul 10 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
javascript编写简易计算器
May 06 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
微信小程序实现音乐播放器
Nov 20 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
php 安全过滤函数代码
2011/05/07 PHP
newxtree.js代码
2007/03/13 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
js脚本实现数据去重
2014/11/27 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python中过滤字符串列表的方法
2020/12/22 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
公司酒会致辞
2015/07/30 职场文书
大学军训口号大全
2015/12/24 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA