黑马程序员技术交流社区
标题:
jQuery与Ajax：“特别的”load()方法（筛选文档、传递方法、...
[打印本页]
作者:
792882192
时间:
2019-10-7 23:49
标题:
jQuery与Ajax：“特别的”load()方法（筛选文档、传递方法、...
大名鼎鼎的”jQuery因为其极简的引用方式而在N年前备受追捧，而今“浪潮”过去，还剩下什么？
我认识jQuery，只是在去年接触ajax时了解，从而感兴趣，进而深入探究（其实也没多深入，只是相关的看了一下）。不得不说，jQuery对ajax支持的四个type：post（一般用于发送）、get（一般常用于接收）、put（修改）、delete（删除） 令我非常震撼，太**实用了。
这其中，post和get是最常用的（因为好像说不是所有的浏览器都支持put和delete），具体的我在 这篇文章 中以JS方式提到，这里不再赘述。
load()
load()方法时jQuery中操作上最为简单的Ajax方法，能载入其他的HTML代码并插入到DOM中。其基本格式为：
load(url [,data] [,callback])
参数意义：
url： String类型，请求HTML页面的URL地址
data（可选）： Object类型，发送至服务器的key/value数据
callback（可选）： Function，请求完成时的回调函数，无论请求成功或失败
为什么说它是“特别的”呢？因为它只用于文档流（html）的操作，而且，既可以是get操作，又可以是post操作：
基本示例：
//如果是jsp代码，这里要加一行：
// <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<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>
//如果是jsp代码，这里要加一行：
//<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>发送ajax的文件</title>
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
//如果是jsp代码，上面这一行要换成：<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>
上面是“载入文档”，它还可以“筛选载入的文档”：
如果只需要加载某页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。通过为 URL参数 指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。
load()方法的URL参数的语法结构为：“url selector”。注意，URL和选择器之间有一个空格：
$(function () {
$("#send").on("click", function () {
$("#resText").load("test.html .para");
});
});
传递方式：
load()方法的传递方式根据 参数data 来自动指定。如果没有参数传递，则采用GET方式传递；反之，则会自动转换为POST方式：
//无参数传递，GET方式
$("#resText").load("test.html .para", function(){
作者:
792882192
时间:
2019-10-7 23:51
123!
作者:
小堂姐姐
时间:
2019-10-21 16:31
大佬，陈龙也
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
123!
大佬，陈龙也