`
zpopopo
  • 浏览: 9997 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery load的详解

阅读更多
我在日志里介绍过,jQuery Load的简单运用和如何防止Load使用缓存。这篇文章将对jQuery Load做更加详细的介绍。

调用load方法的完整格式是:load( url, [data], [callback] ),其中

url:是指要导入文件的地址。
data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。
callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。
一:如何使用data

1.加载一个php文件,该php文件不含传递参数$("#myID").load("test.php");
//在id为#myID的元素里导入test.php运行后的结果2. 加载一个php文件,该php文件含有一个传递参数

$("#myID").load("test.php",{"name" : "Adam"});
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔

$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com4. 加载一个php文件,该php文件以数组作为传递参数

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});
//导入的php文件含有一个数组传递参数。注意:使用load,这些参数是以POST的方式传递的,因此在test.php里,不能用GET来获取参数。

二:如何使用callback

比如我们要在load方法得到服务器响应后,慢慢地显示加载的内容,就可以使用callback函数。代码如下:

$("#go").click(function(){
  $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){
    $("#myID").fadeIn('slow');}
  );
});演示和下载:jQuery-Load
分享到:
评论

相关推荐

    jQuery API 详解 中文版

    《jQuery API 详解 中文版》是一份详尽解析jQuery库核心功能的文档,涵盖了从基础到高级的各种操作。这份资料共分为八大部分,包括Core(核心)、DOM(文档对象模型)、CSS(样式)、JavaScript(脚本语言)、...

    JQuery Lazyload加载图片实例

    **jQuery Lazyload 图片加载技术详解** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会拖慢页面的加载速度,影响用户体验。为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许...

    jquery.lazyload图片预加载效果 jquery预加载

    《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...

    jquery-load-demo

    《jQuery Load方法详解及其在网页动态加载中的应用》 在Web开发中,jQuery库以其简洁易用的API和强大的功能,成为了JavaScript开发者的首选工具之一。"jquery-load-demo"这个项目,显然着重展示了jQuery的load()...

    JQuery详解及应用实例(包含api文档)

    **jQuery详解** jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。它的设计理念是“写得更少,做得更多”,使得开发者能够以更简洁的代码实现丰富的功能。 **...

    jquery lazyload延时加载

    **jQuery LazyLoad 知识详解** 在网页设计与开发中,优化用户体验和页面加载速度是一项至关重要的任务。jQuery 的 LazyLoad 插件提供了一种高效的方法来处理这个问题,特别是对于那些图片众多、流量消耗大的网站而...

    jquery.lazyload 实现图片延迟加载

    **jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...

    jquery-get-post-load 方法

    ### jQuery中的GET、POST与LOAD方法详解 #### 一、概述 jQuery 是一款非常流行的 JavaScript 库,它简化了许多常见的 Web 开发任务,包括 AJAX 请求。本文将详细介绍 jQuery 中 GET、POST 和 LOAD 方法的使用方法...

    前端项目-jquery-lazyload-any.zip

    《前端项目中的jQuery LazyLoad Any技术详解》 在前端开发中,优化网页加载速度和用户体验是至关重要的。jQuery LazyLoad Any是一个高效的插件,专为延迟加载图像、iframe或者其他任何元素而设计,它大大提升了页面...

    50个jQuery实例详解

    12. **AJAX加载内容**:`.load()`方法允许动态加载HTML片段,实例将展示如何实现局部刷新。 13. **表单处理**:jQuery简化了表单验证和提交,实例会讲解如何处理表单元素。 14. **响应式设计**:实例将涵盖如何...

    jQuery中load()方法语法格式

    ### jQuery中load()方法语法格式详解 在前端开发领域,jQuery因其简洁的API和强大的功能,长期以来备受开发者青睐。其中一个非常实用的方法就是`load()`,它允许开发者以异步方式加载远程HTML文档或文档片段,并将...

    jquery.lazyload.js 图片懒加载 --demo

    **jQuery LazyLoad.js 图片懒加载技术详解及Demo演示** 在网页设计中,图片加载是一项重要的性能优化策略。尤其对于内容丰富的网站,一次性加载所有图片可能会导致页面加载速度变慢,影响用户体验。为了解决这个...

    JQuery教材详解

    **jQuery 教材详解** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。自2006年发布以来,jQuery 已经成为 web 开发不可或缺的一部分,尤其对于初学者来说,...

    jQuery lazyload

    **jQuery Lazyload 插件详解** 在Web开发中,优化页面加载速度是至关重要的,尤其在内容丰富的网站或应用中,大量的图片会显著增加页面的加载时间。为了解决这个问题,开发者们通常采用延迟加载(Lazy Load)技术,...

    详解jQuery lazyload 懒加载

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...

    JQuery详解jQuery的bind方法

    ### JQuery详解:jQuery的bind方法 #### 一、概述 jQuery 的 `bind()` 方法是用于在元素上绑定事件处理程序的一种方式。与原生 JavaScript 的事件绑定相比,`bind()` 提供了更多灵活性和便捷性。它允许开发者指定...

    jquery.lazyload

    **jQuery LazyLoad 知识详解** 在Web开发中,尤其是涉及到大量图片的页面,加载速度往往成为用户体验的一大挑战。为了优化网页性能,一种常见的解决方案就是使用懒加载(Lazy Load)技术。`jQuery.lazyload` 是一个...

    详解jQuery中ajax.load()方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据,并把返回的数据放入被选元素中。 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,...

    懒加载jquery.lazyload.js

    **jQuery LazyLoad.js 插件详解** 在网页开发中,图片和大体积的媒体资源往往会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发者们提出了“懒加载”(Lazy Loading)技术,它是一种优化策略,允许...

Global site tag (gtag.js) - Google Analytics