使用Ajax做输入提醒

最新推荐文章于 2024-09-05 15:06:14 发布

sereverls

最新推荐文章于 2024-09-05 15:06:14 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/sereverls/article/details/101726681

版权

1.页面

由于只是做一个功能所以页面只做一个输入框演示。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆</title>
</head>
<body>
    <input type="text" name="userName" id="userName"><span id="sId" style="display: none">用户名已存在！</span><br>
    <button>点击</button>
<script src="jQuery/jquery3.4.1.js"></script>
<script>
    $('#userName').keyup(function () {
        <%--将请求提交给servlet类并传参--%>
        $.get('${pageContext.request.contextPath}/home', {userName:$('#userName').val()}, function (data) {
            <%--此处要注意等到的值，两边会有空格或导致无论是true或false都会判定为false--%>
            if ($.trim(data) == 'true') {
                $('#sId').hide();
            } else {
                $('#sId').show();
            }
        });
    });
</script>
</body>
</html>

2.控制层

package com.j1910.controller;

import com.j1910.service.UserService;
import com.j1910.service.impl.UserServiceImpl;

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 java.io.IOException;

//使用注释给该类进行配置
@WebServlet(name = "loginServlet", urlPatterns = "/home")
public class LoginServlet extends HttpServlet {
    //此处定义的是服务层，进行逻辑判定，操作数据库的，可根据自己需求来，就不将此类展示
    private UserService userService;

    public LoginServlet() {
        this.userService = new UserServiceImpl();
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    //对用户输入的value进行判定，并将值传给Ajax
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userName = req.getParameter("userName");
        resp.getWriter().println(userService.loginUserNameIsExist(userName));
    }
}