1. home.html
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#dianji").click(function(){
// console.log("test");
// alert("testtst");
$("#content").load("test.html");
});
});
</script>
</head>
<body>
<p id="dianji">点击获取load内容</p>
<p class="comment" id="content">这里是内容</p>
</body>
</html>
test.html
<div class="comment" id="test"> <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>
2.可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script> $(function(){ $("button").click(function(){ $("#div1").load("tests.html",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("加载成功"); if(statusTxt=="error") alert("加载失败"+xhr.status+":"+xhr.statusText); }); }); }); </script> </head> <body> <div id="div1"><h2>使用jquery ajax 来改变文本</h2></div> <button>获得外部内容</button> </body> </html>