Ajax实现登录效果

话不多说：直接效果图

在Servlet里面设置账号和密码经行登录
登录成功：到下一个页面
登录失败：在当前页面进行一个弹框
看代码：
service代码：

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.swing.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.lang.*;
@WebServlet(name = "AjaxServlet")
public class AjaxServlet extends HttpServlet {
     
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
        doPost(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
        PrintWriter out=response.getWriter();
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String name = "Admin";
        String pwd = "A123456";
        String ajaxName = request.getParameter("name");
        String ajaxPwd = request.getParameter("pwd");
        if (name.equals(ajaxName) && pwd.equals(ajaxPwd)) {
     
             out.print("ok");
        } else {
     
            out.print("error");
        }
    }
}

HTML代码

<div id="div">
    <form action="test" method="get">
        <div class="login">
            账号：<input type="text" name="name" id="name" onblur="regName()"/><span id="NameSpan"></span>
        </div>
        <div class="login">
            密码：<input type="text" name="pwd" id="pwd" onblur="regPwd()"/><span id="PwdSpan"></span>
        </div>
        <div class="button">
            <input id="input" type="button" value="登录"/>
        </div>
    </form>
</div>

css样式：

<style>
    #name {
     
        width: 180px;
        height: 30px;
        border: 1px solid black;
        border-radius: 15px;
        margin-top: 50px;
    }
    #pwd {
     
        width: 180px;
        height: 30px;
        border: 1px solid black;
        border-radius: 15px;
        margin-top: 50px;
    }
    #div {
     
        font-size: 15px;
        width: 300px;
        height: 300px;
        margin-left: 50px;
        border: 1px solid black;
    }
    #input {
     
        margin-top: 50px;
        border-radius: 15px;
        width: 100px;
        height: 50px;
        border: 1px solid black;
    }
    .login {
     
        margin-left: 15px;
    }
    .button {
     
        margin-left: 50px;
    }
</style>

JavaScript ajax代码：

$(function () {
     
    $("#input").on("click", function () {
     
        $.ajax({
     
            type: "post",
            url: "test",
            data: {
     
                name: $("#name").val(),
                pwd: $("#pwd").val(),
            },
            dataType: "text",
            success:function (data){
     
            if (data == "ok") {
     
                window.location.href = "show.jsp";
            } else {
     
                alert("登录失败");
            }
        }
    });
    });
});

下一步进行修改，请随时关注