AJAX学习（五）

发表于 分类于 ， 阅读次数：

AJAX学习（五）

自动补全代码
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
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动补全</title>
    <style>
      .userInput{
        width: 300px;
        height: 25px;
        font-size: 20px;
        padding-left: 5px;

      }
      .showDiv{
        width: 309px;
        border: 1px solid lightgray;
        background-color: cornflowerblue;
        display: none;
      }
      .showDiv p{
        padding-left: 5px;
        margin-top: 2px;
        margin-bottom: 2px;
      }
      .showDiv p:hover{
        cursor: pointer;
        border: 1px palegoldenrod solid;
        background-color: aliceblue;
      }
    </style>
    <script type="text/javascript">
        window.onload=()=>{
            document.getElementById("keyWords").onkeyup=function (){
                if (this.value == "") {
                    document.getElementById("showDiv").style.display="none";
                }else {
                    var xmlHttpRequest = new XMLHttpRequest();
                    xmlHttpRequest.onreadystatechange=function (){
                        if (xmlHttpRequest.readyState == 4) {
                            if (xmlHttpRequest.status >= 200&&xmlHttpRequest.status<=300) {
                                var json = JSON.parse(xmlHttpRequest.responseText);
                                var html="";
                                for (var i=0;i<json.length;i++){
                                    html+="<p onclick='setinput(\""+json[i].content+"\")'>"+json[i].content+"</p>"

                                }
                                document.getElementById("showDiv").innerHTML=html;
                                document.getElementById("showDiv").style.display="block";
                            }else {
                                alert(this.status)
                            }
                        }
                    }
                    xmlHttpRequest.open("GET","/autocomplete/query?_="+new Date().getTime()+"&keywords="+this.value,true);
                    xmlHttpRequest.send();
                }

            }
        }
        function setinput(content){
            document.getElementById("keyWords").value=content;
            document.getElementById("showDiv").style.display="none";
        }
    </script>
</head>
<body>
<input type="text" class="userInput" id="keyWords">
<div class="showDiv" id="showDiv">
  <p>北京疫情最新情况</p>
  <p>北京天气</p>
  <p>北京时间</p>
  <P>北京人</P>
</div>
</body>
</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
package com.xiaoguan.test;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/query")
public class QueryServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String keywords = request.getParameter("keywords");
        Connection conn=null;
        PreparedStatement ps=null;
        ResultSet rs=null;
        StringBuilder stringBuilder = new StringBuilder();
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn= DriverManager.getConnection("jdbc:mysql://localhost:3306/xiaoguan","root","68963120g");
            String sql="select content from t_ajax where content like ?";
            ps=conn.prepareStatement(sql);
            ps.setString(1,keywords+"%");
            rs=ps.executeQuery();
            stringBuilder.append("[");
            while (rs.next()){
                String content = rs.getString("content");
                stringBuilder.append("{\"content\":\""+content+"\"},");
            }


        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            if (rs!=null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (ps!=null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (conn!=null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print(stringBuilder.substring(0,stringBuilder.length()-1)+"]");

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
drop table if exists t_ajax;
create table t_ajax(
  id int primary key auto_increment,
  content varchar(255)
);
insert into t_ajax (content)
values ('javascript');
insert into t_ajax (content)
values ('javaweb');
insert into t_ajax (content)
values ('java');
insert into t_ajax (content)
values ('java123');
insert into t_ajax (content)
values ('mysql');
insert into t_ajax (content)
values ('myweb');
insert into t_ajax (content)
values ('myapplication');
insert into t_ajax (content)
values ('jdk');
commit ;
select * from t_ajax;