jQuery load() 方法

最新推荐文章于 2021-03-10 17:42:46 发布

zhruifei

最新推荐文章于 2021-03-10 17:42:46 发布

阅读量920

点赞数

分类专栏： JavaScript 文章标签： jquery

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原文链接：http://www.runoob.com/jquery/ajax-load.html
定义和用法
load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。
注意：还存在一个名为 load 的 jQuery 事件方法。调用哪个，取决于参数。

语法

$(selector).load(url,data,function(response,status,xhr))

这里写图片描述

原文链接：http://blog.csdn.net/csdn_yudong/article/details/52537609
步骤：
1、首先创建一个test.html文件，用于被load()方法加载并追加到页面中。

//页面test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</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>

2、再建一个demo1.html，在上面添加两个元素：用来触发Ajax事件，id为”resText”的元素用来显示追加的HTML内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
  $(function(){
      $("#send").click(function(){
              $("#resText").load("test.html");
      })
  })
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />

<div  class="comment">
    已有评论：
</div>
<div id="resText" ></div>
</body>
</html>

显然，load()方法完成了原本很繁琐的工作。开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传递给load()方法即可。当单击按钮后，test.html页面的HTML内ring就会被加载并插入主页面<div id="resText"></div>的元素中。

2、筛选载入的HTML文档
上面的例子是将test.html页面中的内容都加载到id为"resText"的元素里。
如果只需要加载test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。
通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

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

例如：只需要加载test.html页面中class为”para”的内容，可以将demo1.html中的

$("#resText").load("test.html");

改为：

$("#resText").load("test.html  .para");

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

//无参数传递，则是GET方式
$('#resText').load('test.php',function(){
    //...
});

//有参数传递，则是POST方式
$('#resText').load('test.php',{name:'rain',age:'22'}，function(){
    //...
});

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

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

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

load()方法通常用来从Web服务器上获取静态的数据文件，然后这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用 $.get()或者$ .post()或者$.ajax()方法。