登录界面的AJAX通过jquery判断用户名是否存在的实用小案例

最新推荐文章于 2022-11-20 23:42:24 发布

Jie_Fang_J

最新推荐文章于 2022-11-20 23:42:24 发布

阅读量232

点赞数

分类专栏： java 文章标签： ajax jquery 登录 jsp

本文链接：https://blog.csdn.net/weixin_44121079/article/details/97310397

版权

java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

具体的jsp页面代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
session.invalidate();
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统登录 - 超市账单管理系统</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/jquery.js"></script>
</head>
<body class="login_bg">
    <section class="loginBox">
        <header class="loginHeader">
            <h1>超市账单管理系统</h1>
        </header>
        <section class="loginCont">
            <form class="loginForm" action="/loginServlet">
                <div class="inputbox">
                    <label for="user">用户名：</label>
                    <input id="username" type="text" name="username" placeholder="请输入用户名" required/>
                </div>
                <div class="inputbox">
                    <label for="mima">密码：</label>
                    <input id="mima" type="password" name="password" placeholder="请输入密码" required/>
                </div>
                <div class="subBtn">
                    <input type="submit" value="登录" />
                    <input type="reset" value="重置"/>
                </div>

            </form>
        </section>
    </section>

</body>
<script>
    var flag=true;
    $(function () {
        $("#username").blur(function () {
            var username=$("#username").val();
            $.post(
                "/userNameServlet",
                {"username":username},
                function (result) {
                    if (result) {
                        $("#username").css("border", "1px solid rgb(178,178,178)");
                        flag = true;
                    } else {
                        $("#username").css("border", "1px solid red");
                        flag = false;
                    }
                },
                //返回值类型
                "json"
            );
        });
    });

</script>


</html>

SERVLET代码如下

@WebServlet("/userNameServlet")
public class userNameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userName=request.getParameter("username");
String userCode=request.getParameter("userCode");

        UserService us=new UserServiceImpl();
        if (userName!=null) {
            boolean flag=us.selectUserName(userName);
            response.getWriter().write(flag+"");
        }
        if (userCode!=null) {
            boolean flag=us.selectUserCode(userCode);
            response.getWriter().write(flag+"");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
    }
}

Jie_Fang_J

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录界面的AJAX通过jquery判断用户名是否存在的实用小案例

具体的jsp页面代码如下：<%@ page contentType="text/html;charset=UTF-8" language="java" %><%session.invalidate();%><!DOCTYPE html><html><head lang="en"> <meta charset="...
复制链接

扫一扫