2020 使用jquery形式的Ajax+servlet实现简单用户名自动提示功能(可自加后台dao查找数据库)

121 阅读 0 评论 80 点赞

我是靠谱客的博主大胆招牌，这篇文章主要介绍2020 使用jquery形式的Ajax+servlet实现简单用户名自动提示功能(可自加后台dao查找数据库)，现在分享给大家，希望可以做个参考。

使用jquery形式的Ajax+servlet实现简单用户名自动提示功能(可自加后台dao查找数据库)

演示：

在这里插入图片描述

AjaxServlet.java

复制代码

package servlet;

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

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html");
        request.setCharacterEncoding("UTF-8");
        //response.setContentType("application/json; charset=UTF-8");
        String txtname = request.getParameter("txtname");
        System.out.println(txtname);
        PrintWriter wr = response.getWriter();
        if (txtname.equals("林一") || txtname.equals("林二")) {
            wr.write("已存在当前用户名");
        } else {
            wr.write("当前用户名可用");
        }
        wr.close();
    }

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

package servlet;

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

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html");
        request.setCharacterEncoding("UTF-8");
        //response.setContentType("application/json; charset=UTF-8");
        String txtname = request.getParameter("txtname");
        System.out.println(txtname);
        PrintWriter wr = response.getWriter();
        if (txtname.equals("林一") || txtname.equals("林二")) {
            wr.write("已存在当前用户名");
        } else {
            wr.write("当前用户名可用");
        }
        wr.close();
    }


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
}

如果需要查询数据库的，可自写mvc
ResultSet resultSet = userDao.selectUserBy(user);
if (resultSet.next()){
}

antosearch.jsp

复制代码

<%@ page language="java" pageEncoding="UTF-8" %>
        <html>
<meta http-equiv="Content-Type" content="text/html">
<meta charset="UTF-8">
        <head>
            <title>使用jquery Ajax实现自动提示功能</title>
        </head>
        <style>
            .suggest_link {
                background-color: pink;
                padding: 2px 6px;
            }
            
            .suggest_link_over {
                background-color: whitesmoke;
                color: #3c7a4e;
                padding: 2px 6px;
            }
            
            #suggest {
                position: absolute;
                background-color: lightgray;
                text-align: left;
                border: 1px solid #000000;
                width: 200px;

}
        </style>

<body>
            <h1>使用jquery Ajax实现自动提示功能</h1>
            <h3>
                jquery Ajax实现搜索提示
            </h3>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<%@ page language="java" pageEncoding="UTF-8" %>
        <html>
<meta http-equiv="Content-Type" content="text/html">
<meta charset="UTF-8">
        <head>
            <title>使用jquery Ajax实现自动提示功能</title>
        </head>
        <style>
            .suggest_link {
                background-color: pink;
                padding: 2px 6px;
            }
            
            .suggest_link_over {
                background-color: whitesmoke;
                color: #3c7a4e;
                padding: 2px 6px;
            }
            
            #suggest {
                position: absolute;
                background-color: lightgray;
                text-align: left;
                border: 1px solid #000000;
                width: 200px;

            }
        </style>

        <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#txtSearch").blur(function () {
                    //var txtname=$("#txtSearch").val();
                    var txtname=$(this).val();
                    //可var txtname = { "txtname" :$(this).val()};
                    $.ajax({
                        url:"AjaxServlet",
                        type:"post",
                        data:{txtname:txtname},//类似于键值对形式
                        dataType:"text",
                        success:function (result) {
                            $("#suggest").html(result);
                        }
                        });
                });
            })
        </script>

        <body>
            <h1>使用jquery Ajax实现自动提示功能</h1>
            <h3>
                jquery Ajax实现搜索提示
            </h3>

            <div style="width: 500px">
                <form action="" id="formSearch">
                    <input type="text" id="txtSearch" name="txtSearch" autocomplete="off" />
                    <input type="submit" id="cmdSearch" name="cmdSearch" value="点按钮外" />
                    <span style="color: aqua">林一、林二 已被占用</span>
                    <br>
                    <div id="suggest" style="width: 200px;color: red"></div>
                </form>
            </div>
        </body>

        </html>