jQuery ajax - load() 方法

jQuery Ajax 参考手册

实例

使用 AJAX 请求来改变 div 元素的文本:

$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});

亲自试一试

您可以在页面底部找到更多 TIY 实例

定义和用法

load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。

语法
load(url,data,function(response,status,xhr))

参数
描述

url
规定要将请求发送到哪个 URL。

data
可选。规定连同请求发送到服务器的数据。

function(response,status,xhr)

可选。规定当请求完成时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据

  • status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
  • xhr - 包含 XMLHttpRequest 对象
详细说明

该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单:

$("#result").load("ajax/test.html");

如果提供回调函数,则会在执行 post-processing 之后执行该函数:

$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});

上面的两个例子中,如果当前文档不包含 "result" ID,则不会执行 .load() 方法。

如果提供的数据是对象,则使用 POST 方法;否则使用 GET 方法。

加载页面片段

.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

我们可以修改上面的例子,这样就可以使用所获得文档的某部分:

$("#result").load("ajax/test.html #container");

如果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。

jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>, <title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

更多实例

例子 1

加载 feeds.html 文件内容:

$("#feeds").load("feeds.html");
例子 2

与上面的实例类似,但是以 POST 形式发送附加参数并在成功时显示信息:

$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
例子 3

加载文章侧边栏导航部分至一个无序列表:

HTML 代码:

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery 代码:

$("#links").load("/Main_Page #p-Getting-Started li");

Ajax load html page的更多相关文章

  1. jQuery ajax Load关闭缓存的方法

    [导读] 在jQuery ajax Load关闭缓存的方法很简单,我们只要在$ ajaxSetup中把cache: false就楞以了,当然我们还可以使用一个随机参数来实例了.简单介绍load(url ...

  2. Ubuntu下gdb远程调试--warning: Could not load vsyscall page because no executable was specified解决方案

    1. 首先安装gdbserver apt-get install gdbserver 2. 编译-g 程序 gcc -g test_gdb.c -o test_gdb 源码如下: #include & ...

  3. jQuery Ajax(load,post,get,ajax)用法与详解

    今天看到群里面有网友们问到Jquery Ajax的(load,post,get,ajax)之间的区别,现在整理了一篇文章出来,希望可以帮到网友们,首先我们先来看一些简单的方法, 这些方法都是对jQue ...

  4. 让浏览器支持 jquery ajax load 前进、后退 功能

    BEGIN; 一般在做 ajax load 的时候,非常多人都不会考虑到须要浏览器支持前进后退功能,由于大部分人都不知道能够实现. 近期遇到这个问题,经过一小段研究,发现github已经有现成的开源工 ...

  5. 2-jQuery - AJAX load() 方法【进阶篇】

    第一篇的AJAX load() 方法过于简单,补充一下,完整的. 格式 $(selector).load(URL,data,callback); 源码 <!DOCTYPE html> &l ...

  6. ajax load事件

    ajax.load  使用ajax 来改变div元素文本. load( url [, data][, callback] ) load()方法的传递方式根据参数data来自动指定.如果没有参数传递,则 ...

  7. jQuery Ajax(load,post,get,ajax)

    1.load(url, [data], [callback]) 载入远程 HTML 文件代码并插入至 DOM 中. 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式.jQuery ...

  8. How to use Ajax on Visualforce page on Salesforce platform

    Just use Ajax pattern to call object data from server on visualforce page. Following is the Asynchro ...

  9. jquery ajax load

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

随机推荐

  1. ivy,ivyde插件-eclipse

    官方共享更新磁盘下载 http://www.apache.org/dist/ant/ivyde/updatesite/ http://ant.apache.org/ivy/download.cgi 简 ...

  2. jsrender for 标签

    for object使用 1.为进入object中直接使用其中的属性 <div id="result"></div> <script id=" ...

  3. javascript原型Prototype【转】

    转自:http://www.cnblogs.com/starof/p/4190404.html 在javaScript创建对象一文中提到过:用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同 ...

  4. the comment lines of the blast tabular format

    进行Blast比对,用参数-m 6 可以以列表的方式输出结果,结果中从左到右每一列的意义分别是: [00] Query id [01] Subject id [02] % identity [03] ...

  5. while 循环 于 for循环语句

    while 循环 while 循环 while 条件: 如果条件是真的,就继续的循环 如果条件是假的,就停止循环 循环的意思就是让程序重复地执行某些语句,whiler循环就是循环结构的一种,当事先不知 ...

  6. HDU2203 亲和串

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  7. struts2 CVE-2013-4316 S2-019 Dynamic method executions Vul

    catalog . Description . Effected Scope . Exploit Analysis . Principle Of Vulnerability . Patch Fix 1 ...

  8. opencv 简单模糊和高斯模糊 cvSmooth

    cv::Mat 是C++版OpenCV的新结构. cvSmooth() 是老版 C API. 没有把C接口与C + + 结合. 建议你们也可以花一些时间看一下介绍. 同样,你如果查看opencv/mo ...

  9. C#调用Windows API函数截图

    界面如下: 下面放了一个PictureBox 首先是声明函数: //这里是调用 Windows API函数来进行截图 //首先导入库文件 [System.Runtime.InteropServices ...

  10. PL/0编译器(java version) – Scanner.java

    1: package compiler; 2:   3: import java.io.BufferedReader; 4: import java.io.FileNotFoundException; ...