前言
这里解释了我初学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>