web编程之表单向jsp文件的传送与信息获取

最新推荐文章于 2021-03-16 19:16:38 发布

摩霄志在潜修羽

最新推荐文章于 2021-03-16 19:16:38 发布

阅读量284

点赞数

本文链接：https://blog.csdn.net/cprimesplus/article/details/101208289

版权

web编程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

这里解释了我初学web编程的一个疑惑点：

javascript(js) 与 jsp 的区别是什么？引自：《JS与JSP分别是什么》、第二篇
JS：JavaScript；
JSP：Java Server Pages。
jsp：
　　只是servlet的一个变种，方便书写html内容才出现的，servlet是根本，所有jsp能做的，servlet全能做；
JS：
　　是一种基于对象的客户端脚本语言。目的是解决服务器端语言。
　　JSP在HTML中用<% %>里面实现；JS在HTML中用实现。
JS：
　　JavaScript 通常是运行在前台，即运行于用户浏览器的，通常不需要服务器的后台支持（AJAX交
　　互例外）；
JSP：
　　运行在后台服务器上，混合在HTML中的java程序段用于控制HTML的动态生成，并且通常负责调用后台
　　数据库中的数据，形成能够根据使用情况的变化的，具有丰富数据交互效果的页面。

实现

实验内容
在这里插入图片描述

输入用户个人信息与密码一致性校验

先给张效果图（emmm…请忽略low到爆的界面…）
在这里插入图片描述
再说说实现：

用户在HTML页面的输入

首先，既然要将个人信息填写页的用户输入信息提交给另外一个jsp文件，就先要用form表单去存储输入，因此整体的输入部分应该是放在一个form表单内的（使用<form action="Name.后缀"></form>的方法提交到Name.后缀的文件中）。

姓名的内容自然就是一个文本，也就是说是此标签input的属性type = “text”.
输入与确认密码的 type 均为 “password”，避免明文显示。

性别：<input type="radio">

下拉列表：<select></select> 中间使用<option value="xxx">来创建下拉列表的元素（value有必要设置，因为当选择了某个值后——如上海，在使用或输出时需要打印这个选项的值value=“上海”）

可多选的下拉列表：<select multiple="multiple"></select> option使用与上面同理

多选框：<input type="checkbox" value="xxx" name="xxxx"></input> 多选框同样有必要设置value，并且位于同一栏的name应该相同——这样在获取这栏信息时才可以获取全。

用户备注的输入：<textarea rows="3" cols="40"></textarea> 文字输入框，设置高和宽

代码：

  <body bgcolor="#E6E6FA">
    <!-- using to get self-information -->
    <h2>个人信息填写页</h2>
    <HR>
    <!-- 传递表单信息给showSelfInfo.html, 跳转到showSelfInfo.jsp界面 -->
    <!-- <input type="submit" οnclick="javascript:return xxx()">起到提交作用，如果xxx()函数返回false则不提交表单到actions -->
    <form method="post" action="showSelfInfo.jsp" name="form1">
		<div>
			姓名：
    		<input type="text" name="selfName"></input>
    	</div>
    	<br>
    	<div>
    		密码：
    		<input type="password" name="selfPwd"></input>
			<br><br>
			确认密码：
    		<input type="password" name="confirmPwd"></input>
    	</div>
    	<br><br>
    	<div>
    		性别：
    		<input type="radio" name="sex" value="male">男
    		<input type="radio" name="sex" value="female">女
		</div>
    	<br><br>
		<div>
		        户口所在地：
    		<select name="curLocation">
    			<option value="北京">北京</option>
    			<option value="上海">上海</option>
    			<option value="广州">广州</option>
    			<option value="深圳">深圳</option>
    			<option value="河北">河北</option>
    			<option value="天津">天津</option>
    		</select>
		</div>
		<br><br>
		<div>
			曾经居住地（可用Ctrl+单击进行多选）：<br>
    		<select name="pastLocation" multiple="multiple">
    			<option value="北京">北京</option>
    			<option value="上海">上海</option>
    			<option value="广州">广州</option>
    			<option value="深圳">深圳</option>
    			<option value="河北">河北</option>
    			<option value="天津">天津</option>
    	</select>
		</div>
		<br><br>
		<div>
			爱好：
			<!-- 多选——取相同名字即可 -->
			<!-- οnclick="this.value=this.checked" -->
			<br>编程 <input name="hobby" type="checkbox" value="编程"></input>
			<br>书法 <input name="hobby" type="checkbox" value="书法"></input>
			<br>运动 <input name="hobby" type="checkbox" value="运动"></input>
			<br>旅游 <input name="hobby" type="checkbox" value="旅游"></input>
		</div>
		<br><br>
		<div>
			用户备注信息：
			<br><textarea rows="4" cols="40" name="beizhu"></textarea>
		</div>
		<div>
			<input type="submit" onclick="javascript:return cmpPassword()" value="submit"></input>
			<input type="reset" value="reset"></input>
		</div>
    </form>
  </body>

密码一致性校验与信息完整性的检测

使用JavaScript对用户的输入和密码进行校验：
当信息输入完成后，可以使用<input type="submit" onclick="javascript:return cmpPassword()"></input>进行校验，其中当信息完整且两次输入密码一致时cmpPassword()函数返回true，提交成功并跳转入action中的jsp页面；当不满足校验时函数返回false，这种情况会提交失败，可以提示让用户重新输入。

cmpPassword()函数的实现：
（代码没问题，但个人存在一些问题，写在了注释中，等释疑后mark）

    <script type="text/javascript">
		function cmpPassword(){
			var sname = document.forms[0].selfName.value;
			var spwd = document.forms[0].selfPwd.value;
			var cpwd = document.forms[0].confirmPwd.value;
			/*用javascript获取全部表单name名并根据此输出填写/选择的内容*/
			/*
			
			
			document.forms[0] 应该与直接使用其属性名“form1”——document.form1结果相同，但如果
			改成下面这句话直接提交（不输入任何东西的情况下）：var tmp = document.form[0].elements;
			也会进入showSelfInfo.jsp界面
			但我在下面进行了判断：如果有空缺的input就不能进入
			
			
			*/
			/*
			下面这样写就没问题
			
			*/
			var tmp = document.form1.elements;
			/*document.form[0]和document.form1的区别是什么？*/
			for(var i = 0;i < tmp.length;i++){
				if(tmp[i].value == ""){
					alert("输入值不能为空，请重新输入！");
					/*下面操作是将光标锁定在值为空的位置*/
					tmp[i].focus();
					return false;
				}
			}
			/*alert(document.forms[0].curLocation.value);*/
			if(spwd != cpwd){
				alert("两次输入密码不一致，请重新输入！");
				return false;
			}
			return true;
		}
	</script>

显示用户个人信息界面

放图：
在这里插入图片描述
注意：HTML页面传递给jsp的信息可能包含中文（如value=“北京”），此时需要先进行编码转化：
request.setCharacterEncoding("utf-8");

接收getSelfInfo.html页面传递信息与输出的方法大致有以下步骤：

使用JSP内置对象request的request.getParameterNames()获取一个枚举体params，枚举体中包括html页面标签的所有name
只要枚举体params中还有元素while(params.hasMoreElements())，就获取这个元素并将其转化为字符串String类型，使用request.getParameterValues(str)依次获取每个枚举体元素名下的value（由于可能有多个值，如复选框）并输出。

showSelfInfo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>My JSP 'showSelfInfo.jsp' starting page</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="styles.css">
	-->

  </head>
  
  <body bgcolor="#E6E6FA">
  	<!-- using to show self-information -->
  	<h2>用户个人信息显示页</h2>
  	<HR>
    <% 
    	// 将提交内容的字符集设置为utf-8编码
   		request.setCharacterEncoding("utf-8");
    	// 包括所有表单中的name
    	int infoIndex = 0;
    	String userInfo[] = {"姓名", "密码", "性别", "户口所在地", "曾经居住地", "爱好", "备注信息"};
    	Enumeration params = request.getParameterNames();        // 获取因素名称（枚举体），即name指定参数的参数值
    	while(params.hasMoreElements()) {                        // 只要还有下一个枚举
			String cur_name = (String)params.nextElement();      // 跳到下一个枚举，并获取name
			if(cur_name.equals("confirmPwd"))
				continue;
			String tmp[] = request.getParameterValues(cur_name); // 根据name取它对应的值
			/*先获取表单中元素的name，再通过request.getParameterValues(name)的方法得到其值(String)*/
			boolean flag = true;
			out.println("<br>" + userInfo[infoIndex] + ":");
			for(int i = 0;i < tmp.length;i++){
				if(flag){
					flag = false;
					out.print(tmp[i]);
					continue;
				}
				out.print(", " + tmp[i]);
			}
			out.println('\n');
			infoIndex++;
		}
    	
    %>
  </body>
</html>

getSelfInfo.html

<!DOCTYPE html>
<html>
  <head>
    <title>getSelfInfo.html</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">
    
    <script type="text/javascript">
		function cmpPassword(){
			var sname = document.forms[0].selfName.value;
			var spwd = document.forms[0].selfPwd.value;
			var cpwd = document.forms[0].confirmPwd.value;
			/*用javascript获取全部表单name名并根据此输出填写/选择的内容*/
			/*
			
			
			document.forms[0] 应该与直接使用其属性名“form1”——document.form1结果相同，但如果
			改成下面这句话直接提交（不输入任何东西的情况下）：var tmp = document.form[0].elements;
			也会进入showSelfInfo.jsp界面
			但我在下面进行了判断：如果有空缺的input就不能进入
			
			
			*/
			/*
			下面这样写就没问题
			
			*/
			var tmp = document.form1.elements;
			/*document.form[0]和document.form1的区别是什么？*/
			for(var i = 0;i < tmp.length;i++){
				if(tmp[i].value == ""){
					alert("输入值不能为空，请重新输入！");
					/*下面操作是将光标锁定在值为空的位置*/
					tmp[i].focus();
					return false;
				}
			}
			/*alert(document.forms[0].curLocation.value);*/
			if(spwd != cpwd){
				alert("两次输入密码不一致，请重新输入！");
				return false;
			}
			return true;
		}
	</script>

  </head>
  
  <body bgcolor="#E6E6FA">
    <!-- using to get self-information -->
    <h2>个人信息填写页</h2>
    <HR>
    <!-- 传递表单信息给showSelfInfo.html, 跳转到showSelfInfo.jsp界面 -->
    <!-- <input type="submit" οnclick="javascript:return xxx()">起到提交作用，如果xxx()函数返回false则不提交表单到actions -->
    <form method="post" action="showSelfInfo.jsp" name="form1">
		<div>
			姓名：
    		<input type="text" name="selfName"></input>
    	</div>
    	<br>
    	<div>
    		密码：
    		<input type="password" name="selfPwd"></input>
			<br><br>
			确认密码：
    		<input type="password" name="confirmPwd"></input>
    	</div>
    	<br><br>
    	<div>
    		性别：
    		<input type="radio" name="sex" value="male">男
    		<input type="radio" name="sex" value="female">女
		</div>
    	<br><br>
		<div>
		        户口所在地：
    		<select name="curLocation">
    			<option value="北京">北京</option>
    			<option value="上海">上海</option>
    			<option value="广州">广州</option>
    			<option value="深圳">深圳</option>
    			<option value="河北">河北</option>
    			<option value="天津">天津</option>
    		</select>
		</div>
		<br><br>
		<div>
			曾经居住地（可用Ctrl+单击进行多选）：<br>
    		<select name="pastLocation" multiple="multiple">
    			<option value="北京">北京</option>
    			<option value="上海">上海</option>
    			<option value="广州">广州</option>
    			<option value="深圳">深圳</option>
    			<option value="河北">河北</option>
    			<option value="天津">天津</option>
    	</select>
		</div>
		<br><br>
		<div>
			爱好：
			<!-- 多选——取相同名字即可 -->
			<!-- οnclick="this.value=this.checked" -->
			<br>编程 <input name="hobby" type="checkbox" value="编程"></input>
			<br>书法 <input name="hobby" type="checkbox" value="书法"></input>
			<br>运动 <input name="hobby" type="checkbox" value="运动"></input>
			<br>旅游 <input name="hobby" type="checkbox" value="旅游"></input>
		</div>
		<br><br>
		<div>
			用户备注信息：
			<br><textarea rows="4" cols="40" name="beizhu"></textarea>
		</div>
		<div>
			<input type="submit" onclick="javascript:return cmpPassword()" value="submit"></input>
			<input type="reset" value="reset"></input>
		</div>
    </form>
  </body>
</html>

摩霄志在潜修羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web编程之表单向jsp文件的传送与信息获取

前言这里解释了我初学web编程的一个疑惑点：javascript(js) 与 jsp 的区别是什么？引自：《JS与JSP分别是什么》、第二篇JS：JavaScript；JSP：Java Server Pages。jsp：　　只是servlet的一个变种，方便书写html内容才出现的，servlet是根本，所有jsp能做的，servlet全能做；JS：　　是一种基于对象的客户端脚本...
复制链接

扫一扫