【Java实习】Day 04

深藏阁楼爱情的钟 2023-01-01 13:57 147阅读 0赞

在Day 03-2的基础上进行实现，不用form表单进行提交，而是利用ajax进行异步提交

发个牢骚，不知道以啥格式写，害

*  User类不改
 *  LoginServlet类  
    （1）getUser方法不变  
    （2）service不用解决中文乱码问题，ajax不存在这个问题  
    （3）toLogin方法修改如下

/**
         * 用户登录功能
         */
        public void toLogin(HttpServletRequest req, HttpServletResponse resp) {
        
            //记得修改访问权限标识符 private -> public
    
            //接收前端传的用户名的值
            String username = req.getParameter("username");
            //接收前端传的密码的值
            String password = req.getParameter("password");
    
            System.out.println("用户名的值为："+username+"；密码的值为："+password);
    
            //1 获取容器对象
            ArrayList<User> users = getUsers();
    
            //定义一个标识，判断输入的用户名和密码是否合法
            boolean flag = false;
    
            //遍历集合对象
            for(User user:users){
        
                if(user.getUsername().equals(username) && user.getPassword().equals(password)){
        
                    //用户名和密码必须都相等才可以登录成功
                    flag=true;
                }
            }
            if(flag==true){
        
                try {
        
                    resp.getWriter().print("true");
                } catch (Exception e) {
        
                    e.printStackTrace();
                }
            }
            else{
        
                try {
        
                    resp.getWriter().print("false");
                } catch (IOException e) {
        
                    e.printStackTrace();
                }
            }
        }

*  login.jsp中不再定义form表单，修改如下

<%--
      Created by IntelliJ IDEA.
      User: nosteglic
      Date: 2021/1/2
      Time: 21:20
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    
    
    <%
        //写java代码，因为js底层是java
    
        //定义绝对路径地址
        String contextPath = request.getContextPath();
    %>
    
    
    <html>
    <head>
        <title>登录界面</title>
    
        
        <style>
            body{
         
                background-color: aliceblue;
            }
        </style>
    
    </head>
    
    
    
    <script src="<%=contextPath%>/jquery/jquery-1.7.2.js"></script>
    <script>
        //生成文本就绪函数，就不需要绑定onclick   或者声明一个function
        // $(function (){
         
        //     var username = $("#username").val()
        //     alert(username)
        //
        // })
    
        function login(){
         
            var username = $("#username").val()
            //属性过滤选择器
            var password = $("[name='password']").val()
            alert("用户名的值为："+username+"；密码的值为："+password)
    
            //使用阿贾克斯异步提交，非常重要！！！
            //键值对形式 key : value,
            $.ajax({
         
                //提交到后端的地址
                url : "http://localhost:8080/login?method=login",
                //提交类型
                type : "post",
                //提交到后端的参数（数据），可能有多个，用花括号表示一个集合
                data : {
         
                    username : username,
                    password : password
                },
                //请求成功之后的回调函数，固定写法
                success : function (obj){
         //在参数中接收true
                    if(obj){
         
                        alert("登录成功")
                        //location:地址跳转的方法
                        location.href="http://localhost:8080/jsp/list.jsp"
                    }
                    else{
         
                        alert("登录失败，有问题请联系管理员")
                    }
                },
                //预计服务器给我返回的数据类型，json是前后端交互比较流行的格式，还有json jsonp text html，用来规范前后端交互的数据
                dataType : "json"
            })
        }
    </script>
    
    <body>
    <h1 align="center">用户登录界面</h1>
        
        
        
        <table border="1px" bgcolor="pink" align="center">
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="username" name="username"></td>
            </tr>
    
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password"></td>
            </tr>
    
            <tr>
                <td colspan="5" align="center">
                    
                    <input type="button" value="登录" onclick="login()">
                </td>
            </tr>
        </table>
    </body>
    
    </html>

*  工程目录结构  
    ![工程目录结构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70]: /images/20221120/a4d5fe1e219c45b8ab0547953d41e070.png