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文件：

这是一个文本测试。

jQuery - AJAX get() 和 post() 方法 jQuery - AJAX 简介