您的位置：首页 > Web前端 > HTML

jq代码学习24-----ajax load（）加载、筛选加载HTML问文档 fl ch6 p192

2017-09-27 14:50 399 查看

demo.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="../scripts/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
//$("#resText").load("test.html");加载
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert( $(this).html() );	//在这里this指向的是当前的DOM对象，即 $("#iptText")[0]
alert(responseText);       //请求返回的内容
alert(textStatus);         //请求状态：success，error
alert(XMLHttpRequest);     //XMLHttpRequest对象
});
})
})
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />

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

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航