load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
test.txt显示内容为:
<h2>兴义民族师范学院。</h2>
<p>这是一段文本。</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("wenben/test.txt")
})
})
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
<button>获取外部内容</button>
</div>
</body>
</html>
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("wenben/test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!")
if(statusTxt=="error")
alert("Error:"+xhr.status+":"+xhr.statusText)
})
})
})
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
<button>获取外部内容</button>
</div>
</body>
</html>