JSP内置对象（1）：登录页面+修改背景+Cookie

huazi-J

已于 2022-05-18 20:25:06 修改

阅读量1.7k

点赞数 6

分类专栏： Java Web 文章标签： javascript html 前端

于 2022-04-12 01:16:58 首次发布

本文链接：https://blog.csdn.net/weixin_51066144/article/details/124113764

版权

Java Web 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

实验内容

制作一个登陆表单页面1，输入账号和密码，如果账号密码相等（如果同学们使用数据库访问判断账号密码则更好）则重定向到页面2，否则在页面1输出登录失败

在页面2中用一个下拉菜单（采用其它方式也可以）选择背景颜色，提交到页面3显示欢迎页面，背景颜色使用页面2选择的颜色，下次用户直接访问欢迎页面时，要直接显示选中的颜色，无需重新选择（判断是否已经有对应的cookie存在，有则无需再进入页面2），如果要修改默认颜色可以在页面1点击设置再进入页面2重新设置

代码和现象

登陆表单页面1

（1）代码编写(1_login.jsp)

<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
    欢迎登录本系统<br>
    <body align="center">
    <form name="loginForm" action="1_passwordForm_result.jsp" method="post">
        请您输入账号：<input name = "account" type="text"><br>
        请您输入密码：<input name = "password" type="password"><br>
        <input type = "button" onclick="validate()" value="登录">
        <input type = "button" onclick="window.location.href='2_background.jsp'" value="修改背景颜色">
    </form>
    <script type="text/javascript">
        function validate(){
            account = document.loginForm.account.value;
            password = document.loginForm.password.value;
            if(account==""){
                alert("账号不能为空");
                document.loginForm.account.focus();
                return ;
            }
            else if(password==""){
                alert("密码不能为空");
                document.loginForm.password.focus();
                return ;
            }
            else{
                if(account=="12345678"&&password=="111111"){
                    // alert("用户"+account+"登录成功");
                    window.location.replace("2_background.jsp");
                    // document.loginForm.submit();
                }
                else{
                    alert("账号或密码错误")
                    return ;
                }
                return ;
            }
        }
    </script>
    </body>
</html>

（2）网页效果展示
在这里插入图片描述
当账号或密码为空，或者账号或密码错误时，均会弹窗提示

当账号和密码正确时，重定向到页面2

选择背景页面2

（1）代码编写(2_background.jsp)
准备好三张背景图片，分布命名为：blue.jpg、red.jpg、green.jpg、1.jpg

<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
    <body align="center">
    <form name="background_form" action="3_welcome.jsp" method="post">
        请您选择背景:
        <select name="background">
            <option value="url(blue.jpg)">蓝色</option>
            <option value="url(red.jpg)">红色</option>
            <option value="url(green.jpg)">绿色</option>
            <option value="url(1.jpg)">蓝绿混色</option>
        </select>
        <input type = "submit" value="确定">
    </form>
    </body>
</html>

（2）网页效果展示
在这里插入图片描述

欢迎页面3

（1）代码编写（3_welcome.jsp）

<%@ page contentType="text/html;charset=gb2312" language="java" %>
<%;
    String bg = request.getParameter("background");
    if(bg!=null){
         Cookie cookie = new Cookie("background",bg);
         cookie.setMaxAge(600);
         response.addCookie(cookie);
    }
    else{
        Cookie[] cookies = request.getCookies();
        for(int i=0;i<cookies.length;i++){
            if(cookies[i].getName().equals("background")){
                bg = cookies[i].getValue();
                break;
            }
        }
    }
%>
<html>
<body align="center" id="body"
      style="background-size:100% 100%;background-attachment: fixed;">
    <font size="5">欢迎光临</font><br>
    <script type="text/javascript">
        document.writeln("你好");
        <%= "bg" %>
        var bg = '<%= bg %>';
        // document.body.style.background ="url(red.jpg)";
        document.getElementById("body").style.backgroundImage=bg;
    </script>
</body>
</html>

（2）网页效果展示
蓝绿混色背景
在这里插入图片描述
红色背景

重新进入页面3，页面3根据Cookie，依然使用红色背景
从浏览器设置中查看Cookie

总结

1、JSP使用的是Java语言，当使用JSP进行字符串比较的时候不能用“==”，要用equals方法

<%
        String account=request.getParameter("account");
        String password=request.getParameter("password");
        out.println("helloworld");
        if(account.equals("12345678" )|| password.equals("111111")){
//            out.println("登录成功");
            response.sendRedirect("2_background.jsp");
        }
        else{
            out.println("账号或密码错误");
        }
    %>

2、JavaScript 获取 JSP 表达式的值应该使用单引号

var bg = '<%= jsp表达式 %>';

实验项目文件

JSP内置对象（1）：登录页面+修改背景+Cookie 实验代码

huazi-J

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
JSP内置对象（1）：登录页面+修改背景+Cookie

制作一个登陆表单页面1，输入账号和密码，如果账号密码相等（如果同学们使用数据库访问判断账号密码则更好）则重定向到页面2，否则在页面1输出登录失败在页面2中用一个下拉菜单（采用其它方式也可以）选择背景颜色，提交到页面3显示欢迎页面，背景颜色使用页面2选择的颜色，下次用户直接访问欢迎页面时，要直接显示选中的颜色，无需重新选择（判断是否已经有对应的cookie存在，有则无需再进入页面2），如果要修改默认颜色可以在页面1点击设置再进入页面2重新设置
复制链接

扫一扫