您的位置：首页 > 编程语言 > Java开发

使用ajax做登录判断

2019-10-30 12:07 946 查看

用jsp、jQuery和ajax做个一个登录界面的判断是否登录成功

当输入框正则表达式判断成功时，会改变登录按钮的背景色，并赋予一个可点击事件，如果用户名和密码不正确时，提示登录失败

当所有条件都成立时，并且输入用户名和密码都正确时，就可以跳转界面

css代码如下：

#div {
   width: 300px;
   height: 200px;
   border: 1px solid aqua;
   line-height: 30px;
   margin: 0px auto;
   border-radius: 20px;
}

th {
width: 80px;
text-align: right;
}

table {
   width: 300px;
   height: 130px;
   margin-top: 30px;
   position: absolute;
}

input {
   font-size: 18px;
   width: 190px;
   border-radius: 10px;
}

#login {
   width: 100px;
   height: 100%;
   background-color: #CCCCCC;
   margin-left: 100px;
   border-radius: 20px;
}

#losing {
   height: 30px;
   font-size: 12px;
   padding: 0px;
   text-align: center;
   color: red;
}

登录页面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
           + request.getServerName() + ":" + request.getServerPort()
           + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

       //登陆跳转事件方法
       function skip() {
           $(function() {
               $.ajax({
                   url : "LoginServlet",
                   type : "post",
                   data : {
                       name : $("#name").val(),
                       pwd : $("#pwd").val(),
                   },
                   dataType : "text",
                   success : function(data) {
                       if (data == "ok") {
                           window.location.href = "succeed.jsp";
                       } else {
                           $("#losing").text("登录失败");
                           setTimeout(function() {
                               $("#losing").text("");
                           }, 3000);
                       }
                   }
               });
           });
       }

       //登录按钮事件
       function loginBtn() {
           //判断如果两个span标签中的值等于"√√"
           if ($("span").text() == "√√") {
               //就改变按钮的背景，并添加点击事件
               $("#login").css("background-color", "chartreuse");
               $("#login").on("click", function() {
                   //调用跳转事件方法
                   skip();
               });
           } else {
               //否则按钮背景不变，并删除点击事件
               $("#login").css("background-color", "#CCCCCC");
               $("#login").off("click");
           }
       }
       //获取输入框内容与正则表达式做对比
       function getText() {
           var reg = [ /^[a-z]{5,12}$/, /^[a-z\d]{5,12}$/ ];
           $(":text,:password").after("<span></span>").blur(function() {
               if (reg[$(this).attr("data-index")].test($(this).val())) {
                   $(this).next("span").text("√").css("color", "green");
               } else {
                   $(this).next("span").text("×").css("color", "red");
               }
               //当正则表达式判断后，调用按钮事件方法
               loginBtn();
           });
       }
   </script>

</body>
</html>

登录成功页面：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'succeed.jsp' starting page</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">

</head>

<body>
<%
       String name = (String)session.getAttribute("name");
   %>
    欢迎你， <%=name %> 用户
</body>
</html>

Servlet页面代码：

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

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

public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

       response.setContentType("text/html");
       request.setCharacterEncoding("utf-8");
       response.setCharacterEncoding("utf-8");
       PrintWriter out = response.getWriter();

       String name = "abcdefg";
       String pwd = "123456";

       String ajaxName = request.getParameter("name");
       String ajaxPwd = request.getParameter("pwd");

       HttpSession session = request.getSession();

       if(name.equals(ajaxName) && pwd.equals(ajaxPwd)){
           out.print("ok");
           session.setAttribute("name", ajaxName);
       }else{
           out.print("error");
       }

       out.flush();
       out.close();
   }

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： gettext Java EE Java RED Next

相关文章推荐

新的分享

章节导航