jQuery load() 方法

来源：互联网发布：yii框架源码编辑：程序博客网时间：2024/05/29 08:41

原文链接：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()方法。

阅读全文

0 0