手册

jQuery 教程

jQuery 教程 jQuery简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件

jQuery 效果

jQuery 隐藏和显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery - Chaining

jQuery HTML

jQuery 捕获 jQuery - 设置 jQuery - 添加元素 jQuery - 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸

jQuery 遍历

jQuery 遍历 jQuery 祖先 jQuery 遍历 - 后代 jQuery 同胞 jQuery 过滤

jQuery Ajax

jQuery - AJAX 简介 jQuery load() 方法 jQuery - AJAX get()/post() 方法

jQuery 其他

jQuery noConflict() 方法 jQuery JSONP

jQuery 实例

jQuery 参考手册

jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性

jQuery 插件

jQuery Validate jQuery Accordion jQuery Autocomplete jQuery Message jQuery 密码验证 jQuery Prettydate jQuery Tooltip jQuery Treeview

首页大前端 jQuery jQuery中文参考手册

jQuery load() 方法

阅读37808

更新时间2022-04-12

jQuery - AJAX 简介

jQuery - AJAX get()/post() 方法

jQuery - AJAX load() 方法

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2>

<p id="p1">这是段落的一些文本。</p>

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容statusTXT - 包含调用的状态xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jQuery - AJAX 简介

jQuery - AJAX get()/post() 方法