024-jQuery AJAX-load()方法

最新推荐文章于 2024-07-17 15:26:15 发布

天又热了

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量779

点赞数

分类专栏： jQuery 文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122702383

版权

jQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#btn1").click(function(){
					$("#div1").load("try/ajax/demo_test.txt");
				});
				$("#btn2").click(function(){
					$("#div1").load("try/ajax/demo_test.txt #p1");
				});
				$("#btn3").click(function(){
					$("#div1").load("try/ajax/demo_test.txt", 
					function(responseTxt, statusTxt, xhr){
						if(statusTxt=="success"){
							alert("外部内容加载成功!");
						}
						if(statusTxt=="error"){
							alert("Error: "+xhr.status+": "+xhr.statusText);
						}
					});
				});
			});
		</script>
	</head>
	<!--
	jQuery-AJAX load()方法
	jQuery load()方法
		jQuery load()方法是简单但强大的AJAX方法
		load()方法从服务器加载数据,并把返回的数据放入被选元素中
		语法
		$(selector).load(URL,data,callback);
		必需的URL参数规定您希望加载的URL
		可选的data参数规定与请求一同发送的查阅字符串键/值对集合
		可选的callback参数是load()方法完成后所执行的函数名称.
		这是示例文件(demo_test.txt)的内容
		<h2>jQuery AJAX是一个非常棒的功能!<h2>
		<p id="p1">这是段落的一些文本</p>
		下面的例子会把文件"demo_test.txt"的内容加载到指定的<div>元素中:
		实例:
		$("#div1").load("demo_test.txt");
		也可以把jQuery选择器添加到URL参数.
		下面的例子把"demo_test.txt"文件中"id=p1"的元素的内容,加载到指定的<div>元素中;
		实例:
		$("#div1").load("demo_test.txt #p1");
		可选的callback参数规定当load()方法完成后索要允许的回调函数.回调函数可以设置不同的参数:
		- responseTxt;包含调用成功时结果内容
		- statusTxt-包含调用的状态
		- xhr-包含XMLHttpRequest对象
		下面的例子在load()方法完成后显示一个提示框,如果load()方法已经成功,
		则显示"外部内容加载成功!",而如果失败,则显示错误消息.
		$("#btn3").click(function(){
			$("#div1").load("try/ajax/demo_test.txt", 
			function(responseTxt, statusTxt, xhr){
				if(statusTxt=="success"){
					alert("外部内容加载成功!");
				}
				if(statusTxt=="error"){
					alert("Error: "+xhr.status+": "+xhr.statusText);
				}
			});
		});
	-->
	<body>
		<div id="div1">
			<h2>使用jQuery AJAX修改文本内容</h2>
		</div>
		<button id="btn1">获取外部全部内容</button>
		<button id="btn2">获取外部p1内容</button>
		<button id="btn3">获取外部内容并提示</button>
	</body>
</html>

天又热了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
024-jQuery AJAX-load()方法

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){
复制链接

扫一扫