ajax简单登录（踩过的坑）

登陆页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>登录页面</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->    
    <link rel="icon" type="image/png" href="${pageContext.request.contextPath}/images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/beforepage/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/loginfonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->    
    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->    
    <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/loginmain.css">
<!--===============================================================================================-->
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/daterangepicker/moment.min.js"></script>
    <script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
    <script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
    <script src="js/loginmain.js"></script>
    <script type="text/javascript">
    function register(){
        window.location.href="${pageContext.request.contextPath}/register.jsp";
    }
    function Logincheck(){
        $.ajax({
             type: "POST",                          //传数据的方式
             url: "login",                               //servlet地址
             data: $("#form").serialize(),          //传的数据  form表单 里面的数据
             success: function(result){  
                /*     var result = result;
                    console.log(result) */
                    //alert(result);           //传数据成功之后的操作   result是servlet传过来的数据  这个函数对result进行处理，让它显示在 输入框中
                    if(result == "test" ){
                        alert("登录成功！！！");
                        window.location.href="${pageContext.request.contextPath}/SuccessServlet"; //不能直接使用:"/success"
                    }/* else if(result=="pwdfalse"){
                        alert("密码错误！！！");
                        window.location.href="${pageContext.request.contextPath}/login.jsp";
                    }else{
                        alert("没有该用户！！！");
                        window.location.href="${pageContext.request.contextPath}/login.jsp";
                    } */
            },
             error : function() {
                alert("系统出错！！！");
                window.location.href="${pageContext.request.contextPath}/index.jsp";
            } 
         });
      }
    </script>
</head>
<body>
    
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-form-title" style="background-image: url(images/login_center.jpg);">
                    <span class="login100-form-title-1">
                        欢迎登录
                    </span>
                </div>

                <form id="form" class="login100-form validate-form">
                    <div class="wrap-input100 validate-input m-b-26" data-validate="Username is required">
                        <span class="label-input100">用户名：</span>
                        <input class="input100" type="text" name="uname" placeholder="请输入用户名">
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-18" data-validate = "Password is required">
                        <span class="label-input100">密码：</span>
                        <input class="input100" type="password" name="upass" placeholder="请输入密码">
                        <span class="focus-input100"></span>
                    </div>

                    <div class="flex-sb-m w-full p-b-30">
                        <div class="contact100-form-checkbox">
                            <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                            <label class="label-checkbox100" for="ckb1">
                                记住密码
                            </label>
                        </div>

                        <div>
                            <a href="#" class="txt1">
                                忘记密码？
                            </a>
                        </div>
                    </div>

                    <div class="container-login100-form-btn">
                        &nbsp&nbsp<button type="button" class="login100-form-btn" onclick="Logincheck()">登录</button>
                        &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <button type="button" class="login100-form-btn"><a href="${pageContext.request.contextPath}/register.jsp">注册</a></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

后台逻辑实现：

package com.liu.Servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.liu.Dao.AdminDao;
import com.liu.Dao.Impl.AdminDaoImpl;
import com.liu.Entity.Admin;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String result="nouser";
        PrintWriter out=response.getWriter();
        request.setCharacterEncoding("UTF-8");
        request.getContentType();
        String uname=request.getParameter("uname");
        String upwd=request.getParameter("upass");
        System.out.println("uname："+uname);
        System.out.println("upwd:"+upwd);
        AdminDao admindao = new AdminDaoImpl();
        Admin ad=null;
        try {
            ad = admindao.queryAdmin(uname);
            System.out.println(ad.toString());
            if(ad!=null) {
                if(upwd.equals(ad.getM_pwd())) {
                    System.out.println("账户密码正确");
                    HttpSession session=request.getSession();
                    session.setAttribute("user", ad);
                    result="test";
                }else {
                    System.out.println("密码错误");
                    result="pwdfalse";
                }
            }
            
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        System.out.println(result);
        out.print(result);
        out.flush();
        out.close();
    }

}

不能用println；println带换行，会连同换行一起发送到前端，在前端判断会无法进行比较！！！

 


     

posted on 2018-12-20 16:13  让我再想想  阅读(644)  评论(0)  编辑  收藏  举报

导航