jquery onload事件

最新推荐文章于 2024-08-30 08:42:08 发布

原创最新推荐文章于 2024-08-30 08:42:08 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用jQuery的load()方法来动态加载HTML内容。详细解释了load()方法的参数含义，包括URL、数据和回调函数，并通过示例展示了如何在按钮点击事件中调用load()方法加载外部文件。

[size=medium]如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。

调用load方法的完整格式是：load( url, [data], [callback] ),
其中:

url：是指要导入文件的地址。
data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。

load()在没有参数的默认情况下是以GET方式请求，但如果带有参数，将以POST方式请求。


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript">
	function loadData(){
		$("p").load("table.jsp");
		
	}
	
	function loadData2(){
		$("p").load("table.jsp",{"name" : "liuc"},function(){
			$("p").slideDown("slow");
		});
		
	}
</script>	
<title>Insert title here</title>
</head>
<body>
<p id="test">
</p>
<input type="button" onclick="loadData2()" value="加载数据">
</body>
</html>

[/size]