主要用到load()方法以及getScript()方法,具体以一个例子说明：

在现有html文件中加载一个拟好的片段，以及在片段加载完成之前阻止用户进一步操作的弹出框。

首先是现有html代码，无任何内容:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>AJax异步加载</title>
  6. <script src="js/jquery-2.1.3.min.js"></script>
  7. <script src="js/main.js"></script>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

拟一个js文件getData.js写一个函数最简陋的弹出框提示为例：

  1. function getData(){
  2. alert("片段的内容引自新浪体育");
  3. }

拟一个片段box.htm，承载要加载的片段内容：

  1. <div>
  2. <h4>中超-耿晓峰失误拉蒙两球 申花7轮首败1-4绿城</h4>
  3. <p>
  4. 北京时间8月11日晚19点35分，2015年中超联赛第22轮在杭州黄龙体育场开始一场较量，
  5. 由杭州绿城迎战上海申花。上半场第7分钟陈柏良突然冷射，导致耿晓峰接球脱手造成失球，
  6. 这是中华台北球员（陈昌源在比利时土生土长）在中超联赛进的首球。
  7. 第12分钟申花队吕征禁区右路左脚凌空射门扳平比分。第25分钟阿甘在底线附近把球送入禁区，
  8. 拉蒙头球得分，第37分钟阿甘单刀赴会打入一球。
  9. 第60分钟阿甘头球摆渡，拉蒙跟进射门梅开二度。最终杭州绿城4比1战胜上海申花。
  10. </p>
  11. </div>

最后写main.js来异步加载getData.js以及box.htm到现有html文件中。

  1. $(document).ready(function(){
  2. //异步加载js文件
  3. $.getScript("js/getData.js").complete(function(){
  4. getData();
  5. })
  6. //异步加载片段
  7. $("body").text("加载中...")
  8. $("body").load("box.htm",function(url,status,c){
  9. if(status=="error"){
  10. $(this).text("片段加载失败");
  11. }
  12. });
  13. })

最后效果：

jQuery的AJax异步加载的更多相关文章

  1. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  2. Scrapy爬虫框架教程（四）-- 抓取AJAX异步加载网页

    欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...

  3. ajax异步加载问题

    使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.

  4. H5+JS+JQuery+ECharts实现异步加载

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...

  5. Ajax 异步加载

    AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...

  6. 【jquery】 在异步加载的元素上绑定事件

    最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...

  7. 基于jQuery的图片异步加载和预加载实例

    如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...

  8. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

  9. 使用Ajax异步加载页面时，怎样调试该页面的Js

    前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...

随机推荐

  1. pandas 读取excel的指定列

    不管对于read_csv还是read_excel,现在都有: usecols : int or list, default None If None then parse all columns, I ...

  2. review01

    .java叫源文件,java编译器编译源文件后会产生字节码文件,java解释器将字节码文件加载进内存,java虚拟机来执行字节码文件. 如下列文件名为“String01.java” public cl ...

  3. VMware Workstation Pro v14.0

    早些时候戴尔旗下的虚拟化软件 VMware Pro v14 版正式发布,本次更新主要是优化对创意者更新版的支持. 创意者更新版是目前微软 Windows 10 系统的最新版本,该版本亦会在十月份成为C ...

  4. 搜索6--noi1700:八皇后问题

    搜索6--noi1700:八皇后问题 一.心得 二.题目 1756:八皇后 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 会下国际象棋的人都很清楚:皇后可以 ...

  5. ActiveMQ 的客户端选项

    本章重点 怎么使用独占式消费者 消息分组的威力 理解流和二进制大对象 容错传输 计划消息分发 简介 上一章我们介绍了 ActiveMQ 的代理特性,本章我们将学习 ActiveMQ 客户端的一些高级特 ...

  6. 定义类+类实例化+属性+构造函数+匿名类型var+堆与栈+GC回收机制+值类型与引用类型

    为了让编程更加清晰,把程序中的功能进行模块化划分,每个模块提供特定的功能,而且每个模块都是孤立的,这种模块化编程提供了非常大的多样性,大大增加了重用代码的机会. 面向对象编程也叫做OOP编程 简单来说 ...

  7. 抓包tcpdump

      tcpdump是基于Unix系统的命令行式的数据包嗅探工具 tcpdump  可以监测真机或者模拟器 2g/3g/wifi下数据流动,前提手机必须root过. fillder也可以检测客户端数据包 ...

  8. 时间服务器： NTP 服务器及客户端搭建

    时间服务器: NTP 服务器及客户端搭建 一. NTP 服务器的安装与设定 1. NTP 服务器的安装与设定前言 2. 所需软件与软件结构 3. 主要配置文件 ntp.conf 的处理 4. NTP ...

  9. release和retain还有多少人在用

    这年头,看到做IOS开发的专业公司,居然还在用release和retain这样的内存管理方式,是为了表示他很厉害吗? 我只能说他没有跟上时代的潮流,或者就是参加了某种老掉牙的IOS速成培训再入行的. ...

  10. IE跨Iframe时Session丢失问题

    例如IIS下,可以打开IIS窗口——〉选择一个网站——〉属性——〉http头,增加一个http头 然后输入头名:P3P 输入头内容:CP=CAO PSA OUR 点评:与上一个方法类似,此方法也要求第 ...