在文本框内输入省份名称中的某几个字，把符合条件的省份名称显示一个＜div＞中

在文本框内输入省份名称中的某几个字，把符合条件的省份名称显示一个

中

流程是用jdbc从数据库取出数据放入bean中再从servlet中获取bean传到前端页面

1. 数据库得有一张省份表province

CREATE DATABASE springdb;
USE springdb;
CREATE TABLE `province` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `Pname` VARCHAR(255) DEFAULT NULL COMMENT '省份名称',
  `jiancheng` VARCHAR(255) DEFAULT NULL COMMENT '简称',
  `shenghui` VARCHAR(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;


INSERT INTO `province` VALUES ('1', '河北', '冀', '石家庄');
INSERT INTO `province` VALUES ('2', '山西', '晋', '太原市');
INSERT INTO `province` VALUES ('3', '内蒙古', '蒙', '呼和浩特市	');
INSERT INTO `province` VALUES ('4', '辽宁', '辽', '沈阳');
INSERT INTO `province` VALUES ('5', '江苏', '苏', '南京');
INSERT INTO `province` VALUES ('6', '浙江', '浙', '杭州');
INSERT INTO `province` VALUES ('7', '安徽', '皖', '合肥');
INSERT INTO `province` VALUES ('8', '福建', '闽', '福州');
INSERT INTO `province` VALUES ('9', '江西', '赣', '南昌');

2. bean的设置

package domain;

public class province {

    private Integer id;
    private String name;
    private String jiancheng;
    private String shenghui;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getJiancheng() {
        return jiancheng;
    }

    public void setJiancheng(String jiancheng) {
        this.jiancheng = jiancheng;
    }

    public String getShenghui() {
        return shenghui;
    }

    public void setShenghui(String shenghui) {
        this.shenghui = shenghui;
    }

}

`
3. jdbc获取数据库的数据（模糊查询）

package dao;

import javax.swing.*;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class provinceDao {
    public List<String> queryprovinceByid(String Proname) {
        // 获取链接对象
        // 根据链接对象 获取执行sql语句的对象  PreparSatement
        // 根据查询sql  获取结果集 Res
        // 遍历
        //  关闭
        ArrayList<String> list=new ArrayList<>();
        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet res = null;
        String url = "jdbc:mysql:///springdb?characterEncoding=utf8";
        String user = "root";
        String password = "root";
        // 加载驱动
        String name = Proname;
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url, user, password);
            System.out.println("1" +name);
            String sql = "select * from province where name like '%"+name+"%' ";


            pst = conn.prepareStatement(sql);


            res = pst.executeQuery();

            while (res.next()){
         
               name=res.getString("name");
               list.add(name);
            }


        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (res != null) {
                    res.close();
                }
                if (pst != null) {
                    pst.close();
                }
                if (conn != null) {
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
         return list;

    }

4.根据获取到的数据创建servlet进行处理传到前端

package controller;

import dao.provinceDao;

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;
import java.util.List;

@WebServlet("/searchServlet")
public class SearchServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String strProname = request.getParameter("proname");
        System.out.println(strProname);
        List<String> r = null;
        if(strProname != null && !"".equals(strProname.trim())) {
            provinceDao provinceDao = new provinceDao();

            r = provinceDao.queryprovinceByid(strProname);
        }

        String s = "";
        for (int i = 0; i < r.size(); i++) {
            s += r.get(i) + "  ";
        }



        response.setContentType("text/html;charset = utf-8");
        PrintWriter pw = response.getWriter();

        System.out.println(s);

        pw.print(s);
        pw.flush();
        pw.close();
    }

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

5.传到前端页面用ajax进行处理

<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2020/11/25
  Time: 18:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  请输入省份关键字：<input type="text" name="proname" id="proname">
  <input type="button" value="查询" id="select" οnclick="search()" >
  <div id="box"></div>







  <script type="text/javascript">

  function search() {
   var xmlHttp=new XMLHttpRequest();

   xmlHttp.onreadystatechange=function () {

     if (xmlHttp.status===200&&xmlHttp.readyState===4){
       var box=document.getElementById("box").innerText=xmlHttp.responseText;
     }


   }

    var proname = document.getElementById("proname").value;
   console.log(proname);
    var url = "searchServlet?proname="+proname;
    xmlHttp.open("get",url,true);
    xmlHttp.send();

  }






  </script>
  </body>
</html>