jQuery - AJAX load() 方法
jQuery - AJAX load() 方法
简介
jQuery中的AJAX load() 方法是通过使用HTTP请求从服务器读取数据的一个简便方法。它是一个常用的方法,常用于从服务器加载HTML内容,如菜单、列表等。
语法
.load(url, data, callback)
- url:可选参数,请求HTML页面的URL地址;
- data:可选参数,发送到服务器上的数据是Key/Value键值对;
- callback:可选参数,当请求成功时的回调函数。
用法
.load()方法可以通过以下方式使用:
$('#div1').load('ajax/test.html');
运行上述代码,它将会把test.html文件的内容加载到id为div1的元素中。
$('#div1').load('ajax/test.html #p1');
运行此代码,则只会在test.html文件中加载id为p1的元素内容到id为div1的元素中。
$('#div1').load('ajax/test.html', {name:'Tom', age:18}, function(response, status, xhr){
if(status === 'success'){
// 成功的操作
} else {
// 失败的操作
}
});
运行此代码,则会向服务器发送name和age两个参数,当请求成功时,执行回调函数。
特点
.load()方法的特点包括:
- 非常容易使用;
- 可以加载任何数据类型,包括HTML、XML、JSON等;
- 可以读取文件中指定的HTML元素内容,而不是文件的全部内容;
- 可以永久缓存加载后的数据;
- 可以使用回调函数进行操作。
注意事项
.load()方法有一些需要注意的事项,包括:
- 避免在同一页面中使用多个.load()方法,会降低性能;
- 不要将.load()和.click()方法放在同一函数中;
- 服务器返回的数据不能包含JavaScript代码,否则会执行这些代码;
- 如果加载的文件或页面是跨域的,则会遇到CORS限制问题;
- 使用.load()的情况下,不适用于绑定事件。
示例代码
以下是.load()方法的使用示例。
示例1
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<h2>使用 AJAX 来改变文本内容</h2>
</div>
<button onclick="loadDoc()">改变内容</button>
<script>
function loadDoc() {
$('#div1').load('ajax/test.txt');
}
</script>
</body>
</html>
test.txt文件:
<h1>Hello World!</h1>
示例2
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<h2>使用 AJAX 来改变文本内容</h2>
</div>
<button onclick="loadDoc()">改变内容</button>
<script>
function loadDoc() {
$('#div1').load('ajax/test.html #p1');
}
</script>
</body>
</html>
test.html文件:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
</head>
<body>
<h1>测试</h1>
<p id="p1">要加载的内容</p>
<p>不需要加载的内容</p>
</body>
</html>
示例3
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>jQuery AJAX.load()</h2>
<ul>
<li><a href="#" onclick="$('#result').load('ajax/test.html'); return false;">测试</a></li>
<li><a href="#" onclick="$('#result').load('ajax/test.txt'); return false;">文本测试</a></li>
</ul>
<div id="result"></div>
</body>
</html>
test.html文件:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
</head>
<body>
<h1>测试</h1>
<p>这是一个测试页面。</p>
</body>
</html>
test.txt文件:
这是一个文本测试。