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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
jquery获取节点名称
Apr 26 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
0基础学习前端开发的一些建议
Jul 14 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/11/24 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
Yii全局函数用法示例
2017/01/22 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
python实现进程间通信简单实例
2014/07/23 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
消防安全管理制度
2014/02/01 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers