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 写的一个简单的timer
Jul 30 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
js实现常用排序算法
Aug 09 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP语法速查表
2007/01/02 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP面向对象精要总结
2014/11/07 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
javascript之IE版本检测超简单方法
2016/08/20 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python selenium 获取接口数据的实现
2020/12/07 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
大专学生推荐信范文
2013/11/19 职场文书