一、实验目的：
通过编程和上机实验理解 JSP各个页面之间的响应和传递的过程。并且能够熟练的掌握JSP的内置对象的属性和方法，并能灵活运用。
二、实验环境：
Intellij IDEA
三、实验内容：
实现简单注册、登录程序
程序代码：
Login：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>login</title>
<style type="text/css">
.div{
width: 40%;
height: 50%;
margin: auto;
border: black 1px dashed;
/*dashed-虚线*/
}
form{
text-align: right;
padding-top: 100px;
padding-right: 200px;
font-weight: bold;
}
.top1{
padding-left: 30%;
padding-top: 20px;
}
.top2{
padding-left: 30%;
padding-top: 20px;
padding-bottom: 10px;
}
.checkbox{
padding-right: 17%;
font-weight: normal;
}
.top3{
position: relative;
top:-10px;
margin-left: 10px;
background: saddlebrown;
width: 40px;
color: white;
}
.login{
background: saddlebrown;
color: white;
border-radius: 30px;
/*边框圆角*/
}
</style>
</head>
<body background="222.jpg">
<h1 class="top1">我的账户</h1>
<p class="top2">请登录。。。</p>
<%
String name=(String)session.getAttribute("name");
String word=(String)session.getAttribute("word");
// 利用jsp传值，然后用input hidden设置id，传入js中做判断
%>
<input type="hidden" value="<%=name%>" id="username1">
<input type="hidden" value="<%=word%>" id="password1">
<%-- 表达式作为参数时不显示--%>
<div class="div">
<span class="top3">登录</span>
<form>
<span>用户名：</span>
<input type="text" id="loginname"><br><br>
<span>密码：</span>
<input type="password" id="loginpassword"><br><br>
<div class="checkbox">
<input type="checkbox" id="remeber"><label for="remeber">记住用户名</label><br><br>
</div>
<input class="login" οnclick="f1()" type="button" value="login" >
<%-- onclick当按钮被点击时执行的javascript代码--%>
<%-- onchange事件，域的内容改变时发生。支持事件的html标签，input type=”text“、select、textarea--%>
</form>
<p id="out1" style="color:green;font-size: 14px;"></p>
</div>
</body>
<script type="text/javascript" language="JavaScript">
// js代码放在head内username1未定义不能加载
var out1 = document.querySelector("#out1");
// 获取文档中id='out1'的元素
function f1() {
var user=document.getElementById("username1")
var pass=document.getElementById("password1")
var lname=document.getElementById("loginname")
var lpass=document.getElementById("loginpassword")
if(user.value==lname.value&&pass.value==lpass.value){
// out1.innerHTML="登录成功";
window.location.href="loginsuccess.jsp";
return ;
// innerHTML设置表格行开始和结束标签的HTML（网页内容）
}
else {
out1.innerHTML="登录失败";
}
// alert("err")
// Windows对话框弹出对话框内容
}
</script>
</html>
Registered：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>registered</title>
<style type="text/css">
.div{
width: 40%;
height: 70%;
margin: auto;
border: black 1px dashed;
/*dashed-虚线*/
}
form{
text-align: right;
padding-top: 60px;
padding-right: 200px;
font-weight: bold;
}
.top1{
padding-left: 30%;
padding-top: 20px;
}
.top2{
padding-left: 30%;
padding-top: 20px;
padding-bottom: 10px;
}
.checkbox{
padding-right: 24%;
font-weight: normal;
}
.top3{
position: relative;
top:-10px;
margin-left: 10px;
background: saddlebrown;
width: 40px;
color: white;
}
.login{
background: saddlebrown;
color: white;
border-radius: 30px;
/*边框圆角*/
}
.protocol{
font-weight: normal;
color: darkorange;
text-decoration: underline;
/*文本修饰*/
}
</style>
</head>
<body background="222.jpg">
<h1 class="top1">用户注册</h1>
<p class="top2">欢迎您注册本网站的会员，请在下面填写表单信息，要求每项必填，要求信息务必真实，方便我们联系您，谢谢！</p>
<div class="div">
<span class="top3">创建新账户</span>
<form action="success.jsp">
<span>用户名：</span>
<input type="text" name="username"><br><br>
<span>密码：</span>
<input type="password" name="password"><br><br>
<span>确认密码：</span>
<input type="password" name="repassword"><br><br>
<span>电子邮箱：</span>
<input type="text" name="e-mail"><br><br>
<span>电话号码：</span>
<input type="text" name="telephone"><br><br>
<span>地址：</span>
<input type="text" name="place"><br><br>
<div class="checkbox">
<input type="checkbox" value="agree" id="iagree">
<label for="iagree">我同意</label><br><br>
</div>
<a class="protocol" href="protocol.jsp">相关协议和政策</a><br><br>
<input class="login" type="submit" value="注册">
</form>
</div>
</body>
</html>
Success：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>success</title>
<style type="text/css">
.div{
width: 40%;
height: 70%;
margin: auto;
border: black 1px dashed;
/*dashed-虚线*/
}
.form{
text-align: right;
padding-top: 60px;
padding-right: 200px;
font-weight: bold;
}
.top1{
padding-left: 30%;
padding-top: 20px;
}
.top2{
padding-left: 30%;
padding-top: 20px;
padding-bottom: 10px;
}
.top3{
position: relative;
top:-10px;
margin-left: 10px;
background: saddlebrown;
width: 40px;
color: white;
}
.return{
font-weight: normal;
color: darkorange;
text-decoration: underline;
/*文本修饰*/
padding-left: 10%;
}
</style>
</head>
<body background="222.jpg">
<%
String username=request.getParameter("username");
String password=request.getParameter("password");
String email=request.getParameter("e-mail");
String telephone=request.getParameter("telephone");
String place=request.getParameter("place");
session.setAttribute("name",username);
session.setAttribute("word",password);
%>
<h1 class="top1">注册成功</h1>
<p class="top2">欢迎您注册为本网站的会员，您的注册信息如下，请记住您的注册信息</p>
<div class="div">
<span class="top3">用户注册信息</span>
<div class="form">
<p>用户名：<span><%out.println(username);%></span></p>
<p>密码：<span><%out.println(password);%></span></p>
<p>电子邮件：<span><%out.println(email);%></span></p>
<p>电话：<span><%out.println(telephone);%></span></p>
<p>地址：<span><%out.println(place);%></span></p>
</div>
<p><a class="return" href="login.jsp" οnclick="">返回首页</a></p>
</div>
</body>
</html>
Loginsuccess：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>loginsuccess</title>
</head>
<body>
<h1 style="text-align: center">登录成功</h1>
</body>
</html>
Protocol：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>protocol</title>
</head>
<body>
<h1 style="text-align: center">解释权归我</h1>
</body>
</html>
扫一扫
3821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
