太阳不下山 发表于 2021-8-6 12:40:49

jQuery之load方法

load(url, , )
载入远程 HTML 文件代码并插入至 DOM 中。
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。
callback:载入成功时回调函数。
代码一:

加载整个界面

test.html代码:

<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>
<p class="para">-1层.</p>
<p class="para">-2层.</p>
<p class="para">-3层.</p>
</div>
</body>
</html>html部分:
<body>
<input type="button" id="send" value="Ajax获取" />
<divclass="comment">
    已有评论:
</div>
<div id="resText" ></div>
</body>jQuery部分:
<script language="javascript" type="text/javascript">
$(function(){
      $("#send").click(function(){
            $("#resText").load("test.html");
      })
})
</script>代码二:

加载过滤后界面

<script language="javascript" type="text/javascript">
$(function(){
      $("#send").click(function(){
            $("#resText").load("test.html .para");
      })
})
</script>将页面中class为para的加载进来。
代码三:

成功后的回调动作


<script language="javascript" type="text/javascript">
$(function(){
      $("#send").click(function(){
            $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
                         alert( $(this).html() );    //在这里this指向的是当前的DOM对象,即 $("#iptText")
                         alert(responseText);       //请求返回的内容
                         alert(textStatus);            //请求状态:success,error
                         alert(XMLHttpRequest);   //XMLHttpRequest对象
            });
      })
})
</script> 


文档来源:51CTO技术博客https://blog.51cto.com/u_3513677/3285660
页: [1]
查看完整版本: jQuery之load方法