load函数的作用
1.load函数的作用是,从server获取数据,而且把数据放到指定的元素(通常是div元素)中。
2.说的再具体一些就是,把获取到的数据插入到当前文档的某个div元素中。
server上的资源文件
上面所说的所谓的数据,就是server上的资源文件(.html、.jsp等)。
资源文件中不能包括什么?
1.假设是一般的情况的话,应该是能够包括js代码的。
2.假设是使用jquery blockUI的话,即把从server上获取的数据放在遮罩层里:资源文件中不能包括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>
//server上的资源文件: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>