Ajax与jQuery异步加载数据
本文共1096个字,预计阅读时间需要4分钟。
简介
一次性从服务器数据库中读取数据并传送到前端页面上是不现实的,一方面会加重服务器的压力,另一方面客户的带宽资源也会被占用。Ajax刚好可以解决数据异步加载的问题。Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
由于用 jQuery 实现 ajax 比较简单,因此接下来的代码引用jQuery库实现Ajax,另外使用Django作为框架。
其中jQuery可以手动下载放到本地文件夹中,也可以引用下面的语句。
<script src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
HTML语句
类别为demo的div将展示Ajax数据
(document).ready(function())指页面其他元素加载完成后开始加载Ajax数据,此时,浏览器不会有加载条和转圈的情况出现。当然也可以改为点击某个元素加载例如(document).ready(function(){})指页面其他元素加载完成后开始加载Ajax数据,此时,浏览器不会有加载条和转圈的情况出现。当然也可以改为点击某个元素加载例如(document).ready(function())指页面其他元素加载完成后开始加载Ajax数据,此时,浏览器不会有加载条和转圈的情况出现。当然也可以改为点击某个元素加载例如(‘#demo’).click(function(){})。
.getJSON(‘/ajaxserver/’,function(ret)指从Django的view.py中的函数ajaxserver读取JSON数据,数据通过.getJSON(‘/ajax_server/’,function(ret)指从Django的view.py中的函数ajax_server读取JSON数据,数据通过.getJSON(‘/ajaxserver/’,function(ret)指从Django的view.py中的函数ajaxserver读取JSON数据,数据通过(‘#demo’).append(ret)展示到div中。也可以使用document.getElementById(“demo”).innerHTML = ret;来展示数据。
<!DOCTYPE html>
<html>
<body><div class = "demo"></div><script src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>$(document).ready(function(){$.getJSON('/ajax_server/',function(ret){$('#demo').append(ret)})});</script>
</body>
</html>
view.py(Django)
添加
def ajax_server(request):data_dict = {'xxx': 'omegaxyz.com', 'yyy': 'zzz'}return JsonResponse(data_dict)
urls.py(Django)
添加
url(r'^ajax_server/$', 'tools.views.ajax_server', name='ajax_server'),
缺陷
对应用Ajax最主要的批评就是,它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在Ajax应用程序中,却无法这样做。不过开发者已想出了种种办法来解决这个问题,HTML5之前的方法大多是在用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态)。
更多内容访问 omegaxyz.com
网站所有代码采用Apache 2.0授权
网站文章采用知识共享许可协议BY-NC-SA4.0授权
© 2020-2025 • OmegaXYZ-版权所有 转载请注明出处
Ajax与jQuery异步加载数据相关推荐
- jQuery异步加载数据并添加事件示例
当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的. 1.之前用的是jq1.4.3 ...
- SharePoint 实现ajax异步加载数据的几种方式
初到公司,由原想的asp.net开发转向了SharePoint(简称SP)开发,个人感觉与之前差别不大,今天用sp实现异步加载数据的时候遇到点问题,之前在asp.net下一步都是用 jquery.aj ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- JQuery Datatables 动态配置参数异步加载数据
背景需求 在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明 直接上代码 var table; var url = ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- python提取ajax异步加载数据_python爬取豆瓣电影分类排行榜引出的异步加载(AJAX)问题...
1.背景 之前的文章中已经介绍过猫眼TOP100的电影信息爬取案例,网页每页有10条电影信息,通过翻页发现URL变化规律构造循环爬取10页100条全部电影信息.但是豆瓣电影分类排行榜的网页情况就所不同 ...
- SpringMVC--Ajax异步加载数据$(function (){ 逻辑代码}) 的意思是让dom结构加载完毕后再去执行逻辑代码
1. SpringMVC–Ajax异步加载数据 1.1 实体类user User.java package com.tian.pojo;import lombok.AllArgsConstructor ...
- 学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
- php ajax 加载列表,Ajax点击不断加载数据列表(图文教程)
这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下 Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步Ja ...
最新文章
- CSS那些事笔记(一入门)
- mysql 自动化运维工具_MySQL使用工具Inception实现自动化运维
- linux kernel中local_irq_disable()、local_irq_enable()代码解读
- BZOJ——2697: 特技飞行
- extjs4.2 前端读取对象的方法
- 如何生成漫画风图片无需下载APP无需PS无需电脑
- fork()函数_UNIX环境高级编程(APUE)系列学习第8章-2 exit系列函数与wait系列函数...
- ClippingNode实现新手引导高亮裁切
- 创建.NET Core程序的Nuget Package
- Java Access Specifier (不同的访问修饰符)
- [jQuery] form提交到iframe之后,获取iframe里面内容
- 物联网智能家居基本方法实现之经典
- pet 计算机术语,计算机专业英语翻译1?计算机专业英语翻译1、Tobecompet 爱问知识人...
- 【Writeup】BUUCTF_Web_高明的黑客
- python搜狗微信搜索wechatsogou 用法
- Anolis OS 8.2 RC2 发行,支持飞腾、海光、兆芯、鲲鹏等芯片
- 微软企业文化中的“工作激情”
- 文本分类之降维技术之特征抽取之SVD矩阵的分解的原理的介绍
- RSA算法习题 (采用RSA算法,其中e=7,p=11,q=13,求出公钥和私钥,并求出明文85进行加密后的密文。)
- Windows系统自动切换IP批处理
热门文章
- 微信公众号开发 ----微信获取access_token(2)
- probability是什么意思_probability
- ae导出json_AE脚本导出json格式的Web动画工具 Bodymovin v5.7.0 + 使用教程【资源分享1171】...
- php xcache 例子,PHP xcache
- renren-fast:使用人人开源renren-fast报错Error:(11, 39) java: 程序包io.renren.datasource.annotation不存在
- c语言课设代写一般多少钱_海南彩礼钱一般给多少 海南娶媳妇要多少钱
- karto探秘之open_karto 第五章 --- 栅格地图的生成
- 斯坦福大学深度学习公开课cs231n学习笔记(1)softmax函数理解与应用
- 图像增强算法效果评价指标及实现
- Pytorch BatchNorm