jQuery的AJax异步加载片段

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

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AJax异步加载</title>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>

</body>
</html>

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

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

拟一个片段box.htm,承载要加载的片段内容:

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

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

$(document).ready(function(){
    //异步加载js文件
    $.getScript("js/getData.js").complete(function(){
        getData();
    })
    //异步加载片段
    $("body").text("加载中...")
    $("body").load("box.htm",function(url,status,c){
        if(status=="error"){
            $(this).text("片段加载失败");
        }
    });

})

最后效果:

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-24 14:52:42

jQuery的AJax异步加载片段的相关文章

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

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

使用ajax异步加载数据

使用ajax异步加载数据 controller为User赋值 @RequestMapping("/a2") public List<User> a2() { List<User> userlist = new ArrayList<User>(); userlist.add(new User("大头儿子", 6, "男")); userlist.add(new User("小头爸爸", 30,

ajax异步加载问题

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

Ajax异步加载数据及Redis缓存

针对网页分类条目的动态加载,图为页面的Head部分. //categoryListServlet准备分类数据 ProductService service = new ProductService(); List<Category> categoryList = service.findAllCategoryList(); response.setContentType("text/html; charset=utf-8"); Gson gson = new Gson();

Ajax 异步加载

AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术. 那么,让我们一起走进AJax的世界吧. 基础语法 获取Ajax对象 设置回调函数 readystate status 开启交互 客户端更新页面 实例体验 使用Servlet方式 AjaxServletjava webxml ajaxhtml 实验结果 使用JS

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

如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时,其他图片才会加载,改插件很好地实现了图片异步加载功能. 在线预览   源码下载 html代码部分: <div id="content"> <div id="button"> <ul> <li>小图</li>

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

前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析URL,把1.html异步加载到指定位置),不知道这样的框架叫什么名字. 那我们就会遇到一个问题,调试1.html的时候怎么办,通过浏览器掉出控制台找不到1.Html页面,无法加断点啊. 解决办法 在1.html 你所要调试位置加上一句代码  debugger;  就可以了,就是这么爽 可以调试了,可

今日头条图片ajax异步加载爬取,并保存至mongodb,以及代码写法的改进

import requests,time,re,json,pymongofrom urllib.parse import urlencodefrom requests.exceptions import RequestExceptionfrom bs4 import BeautifulSoup as bs #连接mongodbclient = pymongo.MongoClient(host='localhost',port=27017)#指定数据库名称db = client.toutiao #

jquery ajax异步加载table的方法

//显示详细信息 function showInfo(actionId, type) { $.post("Sys_Ajax/Sys_EmployInfo.ashx", { "type": "select", "actionId": actionId, "type2": type }, function (data, status) { if (status == "success") {