当前位置: 萬仟网 > IT编程>网页制作>CSS > 实验二 request、out对象使用

实验二 request、out对象使用

2019年04月15日 07:23  | 萬仟网IT编程  | 我要评论

  request、out对象使用

        一、实验目的

            1、掌握代码片段中的注释的应用;

            2、掌握jsp脚本标示---java代码片段的应用。

        二、实验内容

            1、设计教师与学生不同登陆界面,如下图;

            2、验证码随机生成;

            3、提交后分别转向教师页面和学生页面进行判断用户名和密码正确性;

            4、如果正确,3秒后,转向成功页面,否则跳回验证页面; 

        三、实验方法

            1、在同一页面上设计两个单选按钮:教师、学生,当点击提交按钮后,进入相应的jsp页面。

          当用户名及密码均正确时,进入欢迎界面;如果两者其一不正确就要提醒需要重新输入。在这些操

          作中,注意request内置对象的正确使用方法;

            2、类似于1,使用requestout对象;

            3、学习使用重定向方法解决实验内容3

         实验学时:2学时

        五、实验代码:

        (1)login.html      

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>用户登录</title>
  6 <style type="text/css">
  7 .headline{
  8     font-size:28px;
  9     text-align:left;
 10     font-family:黑体,隶书;
 11     color:#005ab5;
 12     
 13     
 14 }
 15 body{
 16     font-size:18px;
 17     font-family:楷书;
 18     color:#007b97;
 19     
 20 }
 21 div{
 22     box-sizing:border-box;
 23     text-align:center;
 24     line-height:1.5;
 25     
 26     
 27 }
 28 </style>
 29 <script  language="javascript">
 30     var flag = true;
 31     function checkedwords(){
 32         var words = new array('abcdefghijklmnopqrstuvywz','abcdefghijklmnopqrstuvywz','0123456789');//创建需要的数组
 33         var number,i;
 34         var checkedword =''//返回的验证码
 35         for(i=0;i<4;i++){
 36             number = math.floor(math.random()*3);//获取验证码的整数部分
 37             checkedword = checkedword+words[number].substr(math.floor(math.random()*words[number].length),1);
 38         }
 39       document.getelementbyid("cword").innerhtml = checkedword;
 40         
 41     }
 42     function check(){ 
 43        var word1 = document.getelementbyid("word1").value;
 44         var word2 = document.getelementbyid("cword").innerhtml;
 45         if(word1 !== word2){
 46             document.getelementbyid("cwords").innerhtml = "验证码错误,请重新输入"
 47             flag = true;
 48         }else if(word1 == word2 ){
 49             document.getelementbyid("cwords").innerhtml = ""
 50         }
 51     
 52     }
 53   function checked(){
 54       if(flag==false){
 55           return false;
 56       }else{
 57           return true;
 58       }
 59   }
 60     
 61 </script>
 62 </head>
 63 <body background="img/1.jpg">
 64   <div style="background-color:#66b3ff; width:510px; height:310px;margin:0 auto;">
 65     <div style="border:outset;background:#d2e9ff; width:500px; height:300px;margin:0 auto; margin-top:20%">
 66         <div class="headline"><b>用户登录</b>/<i style="color:#adadad">login</i></div>
 67         <hr/>
 68     <form action=check.jsp method="post" onsubmit="submit">
 69         <table>
 70         <tr>
 71             <td><img style="width:28px;height:28px" src="img/收藏用户.png" />用户名:</td>
 72             <td><input type="text" name="name" required="required" size=30></td>
 73         </tr>
 74         <tr>
 75             <td><img style="width:28px;height:28px" src="img/安全.png"/>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
 76             <td><input type="password" name="password" size=31 required="required"></td>    
 77         </tr>
 78         <tr>
 79             <td><img style="width:25px;height:25px" src="img/验证码.png"/>验证码:</td>
 80             <td><input type="text" name="word" id="word1" required="required" size=22 oninput="check()">
 81             <span id="cword" style="background-color:white;color:green;" size=15></span></td>
 82             <td><input type="button" name="change" value="看不清换一张" onclick="checkedwords()" size=3></td>
 83         </tr>
 84         <tr><td></td><td><span id="cwords" style="color:red"></span></td></tr>
 85         <tr>
 86             <td></td><td><input type="radio" name="identity" value="bumen">部门
 87             <input  type="radio" name="identity" value="teacher">教师
 88             <input  type="radio" name="identity" value="student">学生
 89             <input type="radio" name="identity" value="fangke">访客</td> 
 90         </tr>
 91         <tr>
 92             <td><input type="submit" name="submit" value="登录" ></td>
 93             <td></td>
 94             <td><input type="reset" name="reset" value="重置"></td>
 95         </tr>
 96         </table>
 97     </form>
 98     </div>
 99     
100 </div>
101 
102 </body>
103 </html>

 

         (2)check.jsp

 1 <%@ page language="java" contenttype="text/html; charset=iso-8859-1"
 2     pageencoding="iso-8859-1"%>
 3 <!doctype html>
 4 <html>
 5 <head>
 6 <meta charset="iso-8859-1">
 7 <title>验证信息</title>
 8 </head>
 9 <body>
10 <%
11     string name = request.getparameter("name");
12     string pwd = request.getparameter("password");
13     string ide = request.getparameter("identity");
14     if(ide != null){
15             if(ide.equals("teacher")){
16                 if(name.equals("hst") && pwd.equals("123456")){
17                     
18                         response.setheader("refresh","3;url=teacher.jsp");
19                 }else{
20                     out.println("用户名或密码错误!");
21                     response.setheader("refresh","3;url=login.html");
22                 }
23             }else if(ide.equals("student")){
24                 if(name.equals("20164482") && pwd.equals("111111")){
25                     response.setheader("refresh","3;url=student.jsp");
26                 }else{
27                     out.println("用户名或密码错误!");
28                     response.setheader("refresh","3;url=login.html");
29                 }
30             }else if(ide.equals("fangke")){
31                 response.setheader("refresh","3;url=fangke.jsp");
32             }else if(ide.equals("bumen")){
33                 response.setheader("refresh","3;url=bumen.jsp");
34             }
35     }else{
36         response.setheader("refresh","3;url=login.html");
37     }
38     
39 %>
40 </body>
41 </html>

         (3)teacher.jsp

 1 <%@ page language="java" contenttype="text/html; charset=gb2312"
 2     pageencoding="utf-8"%>
 3 <!doctype html>
 4 <html>
 5 <head>
 6 <meta charset="utf-8">
 7 <title>欢迎你</title>
 8 </head>
 9 <body style="color:orange; font-family: 黑体,楷书;text-align:center;font-size:50px">
10 <%
11     out.println("你好!老师");
12 %>
13 
14 </body>
15 </html>

         (4)student.jsp

 1 <%@ page language="java" contenttype="text/html; charset=utf-8"
 2     pageencoding="utf-8"%>
 3 <!doctype html>
 4 <html>
 5 <head>
 6 <meta charset="utf-8">
 7 <title>欢迎</title>
 8 </head>
 9 <body style="color:pink; font-family: 黑体,楷书;text-align:center;font-size:50px">
10 <%
11     out.println("你好!同学");
12 %>
13 
14 </body>
15 </html>

         (5)fangke.jsp

 1 <%@ page language="java" contenttype="text/html; charset=utf-8"
 2     pageencoding="utf-8"%>
 3 <!doctype html>
 4 <html>
 5 <head>
 6 <meta charset="utf-8">
 7 <title>欢迎你!</title>
 8 </head>
 9 <body style="color:green; font-family: 黑体,楷书;text-align:center;font-size:50px">
10 <%
11     out.println("你好!感谢浏览我校官网。");
12 %>
13 
14 </body>
15 </html>

         (6)bumen.jsp

 1 <%@ page language="java" contenttype="text/html; charset=gb2312"
 2     pageencoding="utf-8"%>
 3 <!doctype html>
 4 <html>
 5 <head>
 6 <meta charset="iso-8859-1">
 7 <title>欢迎你!</title>
 8 </head>
 9 <body style="color:red; font-family: 黑体,楷书;text-align:center;font-size:50px">
10 <%
11     out.println("你好!你已成功登入。");
12 %>
13 </body>
14 </html>

        六、实验结果

 

 

        七、相关图片素材

1.jpg

 

 

                                                                           收藏用户.png

 

                                      安全.png

 

 

 

 

验证码.png

 

 

                        

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com