ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

【JavaWeb】JSP动作元素

2021-11-19 20:34:20  阅读:105  来源: 互联网

标签:return JavaWeb 元素 innerHTML value JSP nbsp var jsp


文章目录

1.<jsp:include>动作元素

在JSP 页面中,为了把其他资源的输出内容插入到当前JSP页面的输出内容中,JSP技术提供了<jsp:include>动作元素,<jsp:include>动作元素的具体语法格式如下所示。

<jsp:include page="relativeURL" flush="true lfalse"/>

在上述语法格式中,page属性用于指定被引入资源的相对路径;flush属性用于指定是否将当前页面的输出内容刷新到客户端,默认情况下,flush 属性的值为false。

1.1示例

新建include.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>include</title>
</head>
<body>
	<% Thread.sleep(5000); %>
	include 页面的中文--------->这个就是被包含页面。
</body>
</html>

新建dynamiclnclude.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dynamiclnclude page</title>
</head>
<body>
	dynamiclnclude.jsp内的中文
	<br/>
	<jsp:include page="include.jsp" flush="true"></jsp:include>
</body>
</html>

启动Tomacat服务器
1

2.<jsp:forward>动作元素

<jsp:forward>动作元素将当前请求转发到其他Web 资源(HIMiL贝山、JS 贝图和Servle等),在执行请求转发之后的当前页面将不再执行,而是执行该元素指正的日杯贝面。其具体语法格式如下所示。

<jsp:forward page="relativeURL"/>

2.1示例

新建jspforward.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
	转发到欢迎页面:
	<jsp:forward page="welcome.jsp"></jsp:forward>
</body>
</html>

新建welcome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>welcome page</title>
</head>
<body>
	你好,欢迎进入首页,当前访问时间是:
	<% out.print(new java.util.Date()); %>
</body>
</html>

启动tomcat服务器
2

3书城JSP页面演示

代码:
index.jsp

<%@ 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">
<title>首页</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="js/autoplay.js"></script>

</head>
<body class="main">
	<!-- 1.网上书城顶部 start -->
<div id="divhead">
	<table cellspacing="0" class="headtable">
		<tr>
			<td>
				<a href="#">
					<img src="images/logo.png" width="200" height="60" border="0" /> 
				</a>
			</td>
			<td style="text-align:right">
				<img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" />&nbsp;<a href="#">购物车</a> 
				| <a href="#">帮助中心</a> 
				| <a href="#">我的帐户</a>
				| <a href="register.jsp">新用户注册</a>							
			 
			</td>		
		</tr>
	</table>
</div>
	<!-- 网上书城顶部  end -->

	<!--2. 网上书城菜单列表  start -->
<div id="divmenu">
		<a href="#">文学</a> 
		<a href="#">生活</a> 
		<a href="#">计算机</a> 
		<a href="#">外语</a> 
		<a href="#">经管</a>
		<a href="#">励志</a> 
		<a href="#">社科</a> 
		<a href="#">学术</a> 
		<a href="#">少儿</a>
		<a href="#">艺术</a> 
		<a href="#">原版</a> 
		<a href="#">科技</a> 
		<a href="#">考试</a> 
		<a href="#">生活百科</a> 
		<a href="#" style="color:#FFFF00">全部商品目录</a>		
</div>
<div id="divsearch">
<form action="#" id="searchform">
	<table width="100%" border="0" cellspacing="0">
		<tr>
			<td style="text-align:right; padding-right:220px">
				Search 
				<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
				onmouseover="this.focus();"
				onclick="my_click(this, 'textfield');"
				onBlur="my_blur(this, 'textfield');"/> 
				<a href="#">
					<img src="images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> 
				</a>
			</td>
		</tr>
	</table>
</form>
</div>
<!-- 网上书城菜单列表  end -->

<!-- 3.网上书城首页轮播图  start -->
	<div id="box_autoplay">
    	<div class="list">
        	<ul>
            	<li><img src="ad/index_ad1.jpg" width="900" height="335" /></li>
            	<li><img src="ad/index_ad2.jpg" width="900" height="335" /></li>
            	<li><img src="ad/index_ad3.jpg" width="900" height="335" /></li>
            	<li><img src="ad/index_ad4.jpg" width="900" height="335" /></li>
            	<li><img src="ad/index_ad5.jpg" width="900" height="335" /></li>
        	</ul>
    	</div>
	</div>
	<!-- 网上书城首页轮播图  end -->
	<!--4. 公告板和本周热卖  start -->
    <div id="divcontent">
		<table width="900px" border="0" cellspacing="0">
			<tr>
				<td width="497">
				
					<img src="images/billboard.gif" width="497" height="38" />
					<table cellspacing="0" class="ctl">
						<tr>
							<td width="485" height="29">
                            尊敬的网上书城用户,   <br />
  为了让大家有更好的购物体验,3月25日起,当日达业务关小黑屋回炉升级!<br />具体开放时间请留意公告,感谢大家的支持与理解,祝大家购物愉快!<br />
        3月23日<br />
        传智播客 网上书城系统管理部<br />
                            </td>
						</tr>
					</table>
				</td>
				<td style="padding:5px 15px 10px 40px">
					<table width="100%" border="0" cellspacing="0">
						<tr>
							<td>
								<img src="images/hottitle.gif" width="126" height="29" />
							</td>
						</tr>
					</table>
					<table width="100%" border="0" cellspacing="0">
						<tr>						
							<td style="width:80; text-align:center">
								<a href="#">
								<img src="bookcover/105.jpg" width="102" height="130" border="0" />
								</a>
								<br /> 
							</td>		
							<td style="width:80; text-align:center">
								<a href="#">
								<img src="bookcover/106.jpg" width="102" height="130" border="0" />
								</a>
								<br /> 
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
<!-- 公告板和本周热卖  end -->	

<!--5. 网上书城底部 start -->
<div id="divfoot">
		<table width="100%" border="0" cellspacing="0" >
			<tr>
				<td rowspan="2" style="width:10%">
					<img src="images/logo.png" width="195" height="50"
					style="margin-left:175px" />
				</td>
				<td style="padding-top:5px; padding-left:50px">
					<a href="#">
						<font color="#747556"><b>CONTACT US</b></font> 
					</a>
				</td>
			</tr>
			<tr>
				<td style="padding-left:50px">
					<font color="#CCCCCC">
						<b>COPYRIGHT 2015 &copy; BookStore All Rights RESERVED.</b> 
					</font>
				</td>
			</tr>
		</table>
	</div>
	<!-- 网上书城底部  end -->
</body>
</html>

register.jsp

<%@ 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">
<title>用户注册</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/form.js"></script>
</head>
<body class="main">
	<!-- 1.网上书城顶部 start -->
<div id="divhead">
	<table cellspacing="0" class="headtable">
		<tr>
			<td>
				<a href="index.jsp">
					<img src="images/logo.png" width="200" height="60" border="0" /> 
				</a>
			</td>
			<td style="text-align:right">
				<img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" />&nbsp;<a href="#">购物车</a> 
				| <a href="#">帮助中心</a> 
				| <a href="#">我的帐户</a>
				| <a href="register.jsp">新用户注册</a>							
			 
			</td>		
		</tr>
	</table>
</div>
	<!-- 网上书城顶部  end -->
	<!--2. 网上书城菜单列表  start -->
<div id="divmenu">
		<a href="#">文学</a> 
		<a href="#">生活</a> 
		<a href="#">计算机</a> 
		<a href="#">外语</a> 
		<a href="#">经管</a>
		<a href="#">励志</a> 
		<a href="#">社科</a> 
		<a href="#">学术</a> 
		<a href="#">少儿</a>
		<a href="#">艺术</a> 
		<a href="#">原版</a> 
		<a href="#">科技</a> 
		<a href="#">考试</a> 
		<a href="#">生活百科</a> 
		<a href="#" style="color:#FFFF00">全部商品目录</a>		
</div>
<div id="divsearch">
<form action="#" id="searchform">
	<table width="100%" border="0" cellspacing="0">
		<tr>
			<td style="text-align:right; padding-right:220px">
				Search 
				<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
				onmouseover="this.focus();"
				onclick="my_click(this, 'textfield');"
				onBlur="my_blur(this, 'textfield');"/> 
				<a href="#">
					<img src="images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> 
				</a>
			</td>
		</tr>
	</table>
</form>
</div>
<!-- 网上书城菜单列表  end -->
<!-- 3.网上书城用户注册  start -->
	<div id="divcontent" align="center">
		<form action="registersuccess.jsp" method="post" onsubmit="return checkForm();">
			<table width="850px" border="0" cellspacing="0">
				<tr>
					<td style="padding: 30px"><h1>新会员注册</h1>
						<table width="70%" border="0" cellspacing="2" class="upline">
							<tr>
								<td style="text-align: right; width: 20%">会员邮箱:</td>
								<td style="width: 40%">
								<input type="text" class="textinput"  id="email" name="email" onkeyup="checkEmail();"/>
								</td>
								<td colspan="2"><span id="emailMsg"></span><font color="#999999">请输入有效的邮箱地址</font></td>
							</tr>
							<tr>
								<td style="text-align: right">会员名:</td>
								<td><input type="text" class="textinput"  id="username" name="username" onkeyup="checkUsername();"/>
								</td>
								<td colspan="2"><span id="usernameMsg"></span><font color="#999999">字母数字下划线1到10位, 不能是数字开头</font></td>
							</tr>
							<tr>
								<td style="text-align: right">密码:</td>
								<td><input type="password" class="textinput"  id="password" name="password" onkeyup="checkPassword();"/></td>
								<td><span id="passwordMsg"></span><font color="#999999">密码请设置6-16位字符</font></td>
							</tr>
							<tr>
								<td style="text-align: right">重复密码:</td>
								<td>
								<input type="password" class="textinput"  id="repassword" name="repassword" onkeyup="checkConfirm();"/>
								</td>
								<td><span id="confirmMsg"></span>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">性别:</td>
								<td colspan="2">&nbsp;&nbsp;
                                <input type="radio" name="gender" value="男" checked="checked" /> 男
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" name="gender" value="女" /> 女
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">联系电话:</td>
								<td colspan="2">
								<input type="text" class="textinput"
									style="width: 350px" name="telephone" />
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">个人介绍:</td>
								<td colspan="2">
								<textarea class="textarea" name="introduce"></textarea>
								</td>
								<td>&nbsp;</td>
							</tr>
						</table>

						<table width="70%" border="0" cellspacing="0">
							<tr>
								<td style="padding-top: 20px; text-align: center">
									<input type="image" src="images/signup.gif" name="submit" border="0"/>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</form>
	</div>
    <!-- 网上书城用户注册  end -->
	<!--4. 网上书城下方显示 start -->
<div id="divfoot" align="center">
		<table width="100%" border="0" cellspacing="0" >
			<tr>
				<td rowspan="2" style="width:10%">
					<img src="images/logo.png" width="195" height="50"
					style="margin-left:175px" />
				</td>
				<td style="padding-top:5px; padding-left:50px">
					<a href="#">
						<font color="#747556"><b>CONTACT US</b></font> 
					</a>
				</td>
			</tr>
			<tr>
				<td style="padding-left:50px">
					<font color="#CCCCCC">
						<b>COPYRIGHT 2015 &copy; BookStore All Rights RESERVED.</b> 
					</font>
				</td>
			</tr>
		</table>
		</div>
       <!--4. 网上书城下方显示 start -->
</body>
</html>

registersuccess.jsp

<%@ 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">
<title>Insert title here</title>
</head>
<body>
<center>
	<font color="green" size="7">注册成功</font>
	</center>
</body>
</html>

regDemo.jsp(由于字符编码问题,占时还没解决)

<%@ 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>
  <title> ±íµ¥Ð£Ñé </title>

 </head>

 <body>
			<h3>×¢²áÒ³Ãæ</h3>
			<form action="registersuccess.jsp" method="get" onsubmit="return checkForm();" >
				   Óû§Ãû£º<input type="text" name="username" id="usernameId" onkeyup="checkName();"/>
							<span id="usernameMsg"></span><br/><br/>
				    ÃÜÂ룺 <input type="password" name="password" id="passwordId" onkeyup="checkPassword();"/>
					        <span id="passwordMsg"></span><br/><br/>
				    ÊÖ»úºÅ£º<input type="text" name="phone" id="phoneId" onkeyup="checkPhone();" />
							<span id="phoneMsg"></span><br/><br/>
						    <input type="submit" value="×¢²á" />
		   </form>
			
 </body>
	<script type="text/javascript">
	/*±íµ¥Ð£Ñé*/
	//1.¶¨ÒåÈ«¾Ö±äÁ¿ÓÃÀ´½ÓÊÕ±ê¼Ç¶ÔÏó
	 var usernameObj;
	 var passwordObj;
	 var phoneObj;
	 var usernameMsg;
	 var passwordMsg;
	 var phoneMsg;
  //2.»ñÈ¡±ê¼Ç¶ÔÏó
    window.onload=function(){
		//2.1»ñÈ¡ÊäÈë¿Ø¼þµÄ±ê¼Ç¶ÔÏó
		usernameObj = document.getElementById("usernameId");
		passwordObj = document.getElementById("passwordId");
		phoneObj = document.getElementById("phoneId");
		//2.2 »ñÈ¡´íÎóÐÅÏ¢µÄ±ê¼Ç¶ÔÏó
		usernameMsg = document.getElementById("usernameMsg");
		passwordMsg = document.getElementById("passwordMsg");
		phoneMsg= document.getElementById("phoneMsg");
	
	}
	//±íµ¥Ð£Ñé,ͨ¹ý·µ»Øtrue»òÕßflase À´¿ØÖÆ±íµ¥ÊÇ·ñÌá½»¡£
	function checkForm(){
	 var usernameFlag= checkName();
	 var passwordFlag = checkPassword();
	 var phoneFlag = checkPhone();
	 return usernameFlag && passwordFlag && phoneFlag;
	
	}


	//3.УÑéÓû§Ãû
	function checkName(){
		//3.1»ñÈ¡Óû§Ãû
		 var value = usernameObj.value;
		//3.2 ´´½¨ÕýÔò±í´ïʽÀ´Ð£ÑéÓû§Ãû
		 var regex=/^[a-zA-Z]\w{3,6}$/; // Óû§ÃûÒÔ²»·Ö´óСдµÄ×Öĸ¿ªÊ¼£¬°üº¬×Öĸ¡¢Êý×Ö¡¢Ï»®Ïߣ¬³¤¶È4-7λ
		//3.3 УÑé 
		if(value==""){ // !value µÈͬÓÚ value==""
			 usernameMsg.innerHTML = "Óû§Ãû±ØÐëÌîд";
			 return false;
		} else if( !regex.test(value)){
			usernameMsg.innerHTML = "Óû§Ãû±ØÐëÒÔ×Öĸ¿ªÊ¼£¬²»Çø·Ö´óСд£¬°üº¬Êý×Ö¡¢×Öĸ¡¢Ï»®Ïߣ¬³¤¶È4-7λ";
			return false;
		}else {
			usernameMsg.innerHTML ="";
			 return true;
		
	  }
	
	}
	// 4.УÑéÃÜÂë
	 function checkPassword(){
		//4.1 »ñÈ¡Óû§ÊäÈëµÄÃÜÂë
		var value = passwordObj.value;
		//4.2 ´´½¨ÕýÔò±í´ïʽ
		 var regex = /^[a-zA-Z0-9]{3,6}$/;//ÃÜÂëÊÇ×ÖĸºÍÊý×Ö×é³É£¬³¤¶ÈÊÇ3-6λ
		//4.3 УÑé
		if(!value){
			passwordMsg.innerHTML = "|ÃÜÂë²»ÄÜΪ¿Õ";
			return false;
		}else if(!regex.test(value)){
			passwordMsg.innerHTML = "ÃÜÂëÊÇ×ÖĸºÍÊý×Ö×é³É£¬³¤¶ÈÊÇ3-6λ";
			return false;
		}else {
			passwordMsg.innerHTML = "";
			return true;
		}
	
		
	}
	// 5.УÑéÊÖ»úºÅ
		function checkPhone(){
		
		//5.1 »ñÈ¡ÊÖ»úºÅ
		var value = phoneObj.value;
		//4.2 ´´½¨ÕýÔò±í´ïʽ
		 var regex = /^1[3|5|7|8][0-9]{9}$/;//ÊÖ»úºÅ¿ªÊ¼1£¬µÚ¶þλÊÇ3£¬»òÕß5£¬»òÕß7£¬»òÕß8£¬ºóÃæ9λÈÎÒâд
		//4.3 УÑé
		if(!value){
			phoneMsg.innerHTML = "ÊÖ»úºÅΪ¿Õ";
			return false;
		}else if(!regex.test(value)){
			phoneMsg.innerHTML = "ÊÖ»úºÅ·ûºÏ¹æ·¶";
			return false;
		}else {
			phoneMsg.innerHTML = "";
			return true;
		}
		
		
		}
	</script>
</html>

运行效果:
3

标签:return,JavaWeb,元素,innerHTML,value,JSP,nbsp,var,jsp
来源: https://blog.csdn.net/m0_53953493/article/details/121429590

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有