jQuery--Ajax之load()方法（筛选文档、传递方式、回调函数）详解

最新推荐文章于 2023-04-10 16:58:36 发布

吴声子夜歌

最新推荐文章于 2023-04-10 16:58:36 发布

阅读量1.7k

点赞数 5

分类专栏： jQuery web 文章标签： jQuery Ajax load()

本文链接：https://blog.csdn.net/cold___play/article/details/101987480

版权

web 同时被 2 个专栏收录

41 篇文章

订阅专栏

jQuery

30 篇文章

订阅专栏

load()方法

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程html代码并插入DOM中。其语法格式为：

load(url [, data] [, callback])

参数：

参数名称	类型	说明
url	String	请求HTMl页面的RUL地址
data(可选)	Object	发送至服务器的key/value数据
callback(可选）	Function	请求完成时的回调函数，无论请求成功或失败

示例：
请求的jsp文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <div class="comment">
        <h6>张三：</h6>
        <p class="para">沙发</p>
    </div>
    <div class="comment">
        <h6>李四：</h6>
        <p class="para">板凳</p>
    </div>
    <div class="comment">
        <h6>王五：</h6>
        <p class="para">地板</p>
    </div>
</body>
</html>

发送Ajax的jsp文件:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>get</title>
    <script src="<%=request.getContextPath()%>/js/jquery-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#send").on("click", function () {
                $("#resText").load("test.jsp");
            });
        });
    </script>
</head>
<body>
    <input type="button" id="send" value="Ajax获取">
    <div class="comment">已有评论：</div>
    <div id="resText"></div>
</body>
</html>

在这里插入图片描述

点击按钮，发送Ajax请求：
在这里插入图片描述
注意：主页面的样式会立即应用到新加载的内容上。

筛选载入的文档：

如果只需要加载test.jsp页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为：“url selector”。注意，URL和选择器之间有一个空格。

示例：只加载class为“para”的内容

$(function () {
    $("#send").on("click", function () {
        $("#resText").load("test.jsp .para");
    });
});

在这里插入图片描述

传递方式

load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则会自动转换为POST方式。

//无参数传递，GET方式
 $("#resText").load("test.jsp .para", function(){
	//....
});

//有参数传递，POST方式
 $("#resText").load("test.jsp .para",{name:"tom", age:"18}, function(){
	//....
});

回调函数

对于必须在加载完成后才能继续的操作，load(0方法提供了回调函数，该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：

 $("#resText").load("test.jsp", function(responseText, textStatus, XMLHttpRequest){
	//responseText：请求返回的内容
	//textStatus：请求状态：success、error、notmodified、timeout4种
	//XMLHttpRequest：XMLHttpRequest对象
});


注意：在load()方法中，无论Ajax请求是否成功，只要请求完成（complete）后，回调函数就被触发。