load函数

最新推荐文章于 2021-12-09 09:00:00 发布

B_qxzb

最新推荐文章于 2021-12-09 09:00:00 发布

阅读量1.4k

点赞数

分类专栏： jquery blockUI

本文链接：https://blog.csdn.net/B_qxzb/article/details/47002027

版权

jquery blockUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

load函数的作用

1.load函数的作用是，从服务器获取数据，并且把数据放到指定的元素（一般是div元素）中。

2.说的再详细一些就是，把获取到的数据插入到当前文档的某个div元素中。

服务器上的资源文件

上面所说的所谓的数据，就是服务器上的资源文件（.html、.jsp等）。

资源文件里不能包含什么？

1.如果是一般的情况的话，应该是可以包含js代码的。

2.如果是使用jquery blockUI的话，即把从服务器上获取的数据放在遮罩层里：资源文件里不能包含js代码，而应该把js代码都写在宿主文件（即当前文件）中。因为资源文件里的js函数都无效，具体原因不是很清楚。

代码示例，

//宿主文件：index.jsp
<%@ page language="java" pageEncoding="utf-8"%> 
<%@ taglib prefix="s" uri="/struts-tags"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>黑蓝首页</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<!-- <link rel="stylesheet" type="text/css" href="css/websiteFront.css">  -->

<style type="text/css">
.countLoginData {
	max-width: 100%;
	background-color: #f6f6f1;
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	cursor: pointer;
}
</style>


<script src="js/jquery/jquery-1.11.3.js"></script>
<script src="js/jquery/jquery.blockUI.js"></script>

<script type="text/javascript">
    // 首页-登录
	function login() {

	}

    // 首页-注册
	function register() {
	    var width = 600;
		var height = 400;
		

		try {
			$
					.blockUI({
						message : "<div id='registerMaskLayer'></div>",
						css : {
							top : ($(window).height() - height) / 2 + 'px', //遮罩层居中
							left : ($(window).width() - width) / 2 + 'px',
							width : width + 'px',
							height : height + 'px'
						},
						overlayCSS : {
							backgroundColor : '#F0F0F0',							
						}
					});
		} catch (e) {
			alert(e);
		}

		$("#registerMaskLayer").load("register.jsp");

		return false;
	}
</script>
<script type="text/javascript">
	// 遮罩层-不注册
	function noRegister() {
		$.unblockUI();
	}
	
	// 遮罩层-注册
	function register1(){
// 	    var form = $("#register");
        var form = document.getElementById("register");
        var param = $("#register").serialize();
	    $.post(form.action,
	           param,
	           function(json){
	               if(json.success){
	                   alert("注册成功！");
	               }else{
	                   alert("注册失败！");
	               }
	           },
	           "json");
	}
</script>
</head>

<body>
	<!-- 搜索栏 -->
	<table style="margin-left:200px">
		<tr>
			<td id="websiteName" class="websiteName"
				style="font-size:14px;font-weight:bold">黑蓝作品</td>
			<td style="padding:5px;margin:20px"><input type="text"
				name="search" id="search" class="search"
				style="width:400px;height:30px" /></td>
		</tr>
	</table>

	<hr class="hrClass" />

	<!-- 菜单栏 -->
	<table style="margin-left:180px">
		<tr>
			<td>
				<table>
					<!-- 菜单 -->
					<tr>
						<td style="margin:10px; padding:10px"><a><img
								src="images/novel.png" />
						</a>
						</td>
						<td style="margin:10px; padding:10px"><a><img
								src="images/suibi.png" />
						</a>
						</td>
						<td style="margin:10px; padding:10px"><a><img
								src="images/poem.png" />
						</a>
						</td>
						<td style="margin:10px; padding:10px"><a><img
								src="images/vision.png" />
						</a>
						</td>
						<td style="margin:10px; padding:10px"><a><img
								src="images/hasPublished.png" />
						</a>
						</td>
						<td style="margin:10px; padding:10px"><a><img
								src="images/pendingPublished.png" />
						</a>
						</td>
					</tr>
				</table></td>
			<td>
				<table style="margin-left:100px;">
					<!-- 登录和注册 -->
					<tr>
						<td><a href="#" οnclick="login()"><img
								src="images/login.png" />
						</a>
						</td>
						<td><a href="#" οnclick="register()"><img
								src="images/register.png" />
						</a>
						</td>
					</tr>
				</table></td>
		</tr>
	</table>

	<!-- 统计登录数据 -->
	<table style="margin-left:170px">
		<tr>
			<td>
				<table class="countLoginData">
					<tr>
						<td>10000</td>
						<td>今日访问次数</td>
					</tr>
					<tr>
						<td>3000</td>
						<td>当前正在访问</td>
					</tr>
					<tr>
						<td>1000</td>
						<td>当前登录用户</td>
					</tr>
				</table>
			</td>
			<td>
				<table>
					<tr>
						<td>黑蓝奖</td>
						<td>中国最好的短篇小说奖</td>
					</tr>
					<tr>
						<td colspan="2">
							<hr />
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<!-- 菜单栏 -->
	<table style="margin-left:170px">
		<tr>
			<td>
				<table>
					<!-- 推荐作者 -->
					<tr>
						<td>陈卫</td>
					</tr>
					<tr>
						<td>江冬</td>
					</tr>
					<tr>
						<td>水鬼</td>
					</tr>
					<tr>
						<td>孙智正</td>
					</tr>
					<tr>
						<td>曹寇</td>
					</tr>
				</table></td>
			<td>
				<table>
					<!-- 获奖作品 -->
					<tr>
						<td colspan="6">2015年第4季度</td>
					</tr>
					<tr>
						<td colspan="6">第28届·黑蓝奖</td>
					</tr>
					<tr>
						<td>获奖作品</td>
						<td>内向</td>
						<td>获奖作家</td>
						<td>江冬</td>
						<td>获奖感言</td>
						<td>感言题目</td>
					</tr>
					<tr>
						<td colspan="6">
							<div>感言内容</div>
						</td>
					</tr>
				</table></td>
			<td>
				<table>
					<!-- 颁奖语 -->
					<tr>
						<td>
							<div>颁奖语</div>
						</td>
					</tr>
					<tr>
						<td>
							<div>********************************</div>
						</td>
					</tr>
				</table></td>
		</tr>
	</table>
</body>
</html>

//服务器上的资源文件：register.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册遮罩层页面的内容</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>

<body>
	<form name="register" id="register" action="login/register.action">
		<table>
			<tr>
				<td><s:textfield name="user.username" label="用户名" />
				</td>
			</tr>
			<tr>
				<td><s:textfield name="user.password" label="密码" />
				</td>
			</tr>
			<tr>
				<td><s:textfield name="user.email" label="邮箱" />
				</td>
			</tr>
		</table>

		<div>
			<input type="button" value="不注册" οnclick="noRegister();" /> 
			<input type="button" value="注册  >>" οnclick="register1();" />
		</div>
	</form>
</body>
</html>