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="#" onclick="login()"><img

								src="images/login.png" />

						</a>

						</td>

						<td><a href="#" onclick="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="不注冊" onclick="noRegister();" />

			<input type="button" value="注冊  >>" onclick="register1();" />

		</div>

	</form>

</body>

</html>

load函数的更多相关文章

  1. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

  2. EasyUI之Form load函数IE8下设置Radio或Checkbox的BUG

    EasyUI的form的load函数很好用,表单赋值就靠它了,简单方便.我们可以指定url以Ajax加载,如: 1: $('#ff').form('load', 'ajax/common') JSON ...

  3. 解决load 函数无法赋予变量名的问题

    以前非常喜欢使用load函数,因为简单,而且存储相对较大的matrix.list文件更为方便.但是load函数有一个问题是在使用其过程中无法对其载入的data赋予变量名: # save data x ...

  4. c++ 中CImage类Load函数，路径中含有空格应对策略!

    最近,在写一些东西的时候,需要用到CImage类将JPG各式的图片转换成BMP图片,传入的是图片的绝对地址:如C:\Users\Administrator\Documents\Visual Studi ...

  5. jQuery的load函数是异步的

    今天使用load函数的时候,用它加载页面,再修改页面样式,但是没有成功,上网查了一下,原来是异步的,也就是说之后的代码不会等页面加载完再执行,有可能先执行,这就找不到元素了. 解决方法,利用load函 ...

  6. Json模块dumps、loads、dump、load函数介绍

    转自:http://blog.csdn.net/mr_evanchen/article/details/77879967 Json模块dumps.loads.dump.load函数介绍 1.json. ...

  7. Matlab中save与load函数的使用

    用save函数,可以将工作空间的变量保存成txt文件或mat文件等. 比如: save peng.mat p j 就是将工作空间中的p和j变量保存在peng.mat中. 用load函数,可以将数据读入 ...

  8. Python中的Json模块dumps、loads、dump、load函数介绍

    Json模块dumps.loads.dump.load函数介绍 1.json.dumps() json.dumps() 用于将dict类型的数据转成str,因为如果直接将dict类型的数据写入json ...

  9. js进阶 14-3 如何接收load函数从后台接收到的返回数据

    js进阶 14-3 如何接收load函数从后台接收到的返回数据 一.总结 一句话总结:load方法的回调函数的参数即可接收从后台的返回数据. 1.load方法的回调函数的参数是什么? 语法:load( ...

随机推荐

  1. java excel poi导入 过滤空行的方法 判断是否是空行

    private boolean isRowEmpty(Row row){ for (int c = row.getFirstCellNum(); c < row.getLastCellNum() ...

  2. jQuery中$this和$(this)的区别

    要写一个点击弹窗任意地方,关闭弹窗.点击事件写标签在元素上 onclick =  closepop(this),这时候很容易搞不清楚怎么去获取当前元素 function closepop(e){ va ...

  3. vue2.0框架认识

    虚拟dom和声明式渲染: Vue的编译器在编译模板之后,会把这些模板编译成一个渲染函数 .而函数被调用的时候就会渲染并且返回一个 虚拟DOM的树 .这个树非常轻量,它的职责就是描述当前界面所应处的状态 ...

  4. RabbitMQ调用

    添加 gradle依赖complie("com.rabbitmq:amqp-client:5.0.0") Hello, World Working Queues Publish/S ...

  5. daxcie

    Database->Edit Current DBMS菜单 修改如下:选中General选项卡,依次打开Script->Sql->Fomat->CaseSensitivityU ...

  6. swift VS NSObject

    Any class that does not inherit from another class is known as a base class. Swift classes do not in ...

  7. Redis系列(十)--集群cluster

    在之前学习了Master-Slave.Sentinel模式,但是在某些情况下还是无法满足系统对QPS等要求,这时候就需要Cluster,Redis3.0支持了cluster 一.为什么使用Cluste ...

  8. Android studio开发-第一个应用

    Android studio开发-第一个应用 上效果图 1.先创建布局文件 firstbutton.xml 代码 <?xml version="1.0" encoding=& ...

  9. BigDecimal运算

    BigDecimal由任意精度整数未缩放值和32位整数级别组成 . 如果为零或正数,则刻度是小数点右侧的位数. 如果是负数,则数字的非标定值乘以10,以达到等级的否定的幂. 因此,BigDecimal ...

  10. UVA - 1601 The Morning after Halloween （双向BFS&单向BFS）

    题目: w*h(w,h≤16)网格上有n(n≤3)个小写字母(代表鬼).要求把它们分别移动到对应的大写字母里.每步可以有多个鬼同时移动(均为往上下左右4个方向之一移动),但每步结束之后任何两个鬼不能占 ...