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

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

  • 必需的 ​URL​ 参数规定您希望加载的 URL。
  • 可选的 ​data​ 参数规定与请求一同发送的查询字符串键/值对集合。
  • 可选的 ​callback​ 参数是 load() 方法完成后所执行的函数名称。

​示例​

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="jQuery/jquery-3.4.1.js">
    </script>
    <script>

        $(function(){
            $("input").click(function(){
                $("#resText").load("files/c.html");
            })
        })
    </script>
</head>

<body>

<input type="button" id="send" value="ajax获取"/>
<div id="resText"></div>



</body>
</html>

c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>123456</p>
<h1 id="p1">456789</h1>

</body>
</html>

把 jQuery 选择器添加到URL参数

注意：url与需要添加的内容之间存在一个空格！

Ajax——load()方法_xml

​示例：把c.html中指定的标签id为p1的元素显示在div中​

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="jQuery/jquery-3.4.1.js">
    </script>
    <script>

        $(function(){
            $("input").click(function(){
                $("#resText").load("files/c.html #p1");
            })
        })
    </script>
</head>

<body>

<input type="button" id="send" value="ajax获取"/>
<div id="resText"></div>



</body>
</html>

c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>123456</p>
<h1 id="p1">456789</h1>

</body>
</html>


可选的 callback 参数

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


  • data - 包含调用成功时的结果内容
  • textStatus - 请求返回的状态：是否成功：success、error、notmodify、timeout
  • xmlRequest - 包含 XMLHttpRequest 对象

$(selector).load(url,function(data, textStatus,xmlRequest){
                /*function里面包含三个参数:
                 * 1、返回请求的内容data
                 * 2、请求返回的状态：是否成功：success、error、notmodify、timeout
                 * 3、Xml请求对象
                 */
            })