1、项目清单

在这里插入图片描述

2、代码

1 、index.jsp代码

在这里插入代码片<%--
  Created by IntelliJ IDEA.
  User: 福仔
  Date: 2022/2/26
  Time: 17:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Ajax根据省份id获取名称</title>
    <script type="text/javascript">
      function search() {
    
    
        //1、初始化对象
        var xmlHttp=new XMLHttpRequest();
        //2、绑定事件
        xmlHttp.onreadystatechange = function () {
    
    
          if( xmlHttp.readyState == 4 && xmlHttp.status== 200){
    
    
            //alert(xmlHttp.responseText)
            //更新页面，就是更新dom对象
            document.getElementById("proname").value= xmlHttp.responseText;
          }
        }
        //3.初始异步对象
        //获取proid文本框的值
        var proid = document.getElementById("proid").value;
        xmlHttp.open("get","queryProvice?proid="+proid,true);

        //4.发送请求
        xmlHttp.send();
      }
    </script>
  </head>
  <body>
  <p>ajax根据省份id获取名称</p>
  <table>
    <tr>
      <td>省份编号：</td>
      <td><input type="text" id="proid"/>
        <input type="button" value="搜索" onclick="search()"/>
      </td>

    </tr>
    <tr>
      <td>省份名称</td>
      <td><input type="text" id="proname"/></td>
    </tr>
  </table>
  </body>
<a href="html/main.jsp">link</a>
</html>

3、ProvinceDao类代码

package com.bjpowernode.dao;

import com.bjpowernode.entity.Province;

import java.sql.*;

//使用jdbc访问数据库
public class ProvinceDao {
    
    

    //根据id获取名称
    public String queryProviceNameById(Integer proviceId){
    
    
        //声明变量
        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs  = null;
        String sql= "";
        //定义参数
        String url="jdbc:mysql://localhost:3306/springdb";
        String username="root";
        String password="123456";
        //连接数据库
        String name = "";
        //加载驱动
        try {
    
    
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
            //创建PreparedStatement
            sql="select  name from province where id=?";
            pst = conn.prepareStatement(sql);
            //设置参数值
            pst.setInt(1,proviceId);
            //执行sql
            rs = pst.executeQuery();
            //遍历rs
            /*while(rs.next()){ //当你的rs中有多余一条记录时。
               name =  rs.getString("name");
            }*/

            if( rs.next()){
    
    
                name =rs.getString("name");
            }

        } catch (ClassNotFoundException | SQLException e) {
    
    
            e.printStackTrace();
        } finally {
    
    
            try{
    
    
                if( rs != null){
    
    
                    rs.close();
                }
                if( pst != null){
    
    
                    pst.close();
                }
                if( conn != null){
    
    
                    conn.close();
                }

            }catch(Exception e){
    
    
                e.printStackTrace();
            }

        }
        return name;
    }
}

3、QueryProviceServlet代码

package com.bjpowernode.controller;

import com.bjpowernode.dao.ProvinceDao;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class QueryProviceServlet extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest req,
                         HttpServletResponse resp) throws ServletException, IOException {
    
    
        //处理get请求
        String strProid = req.getParameter("proid");
        System.out.println("strProid:"+ strProid);

        String name = "默认是无数据";
        //访问dao，查询数据库
        if( strProid != null && !"".equals(strProid.trim()) ){
    
    
            //创建dao对象，调用它的方法
            ProvinceDao dao  = new ProvinceDao();
            name  = dao.queryProviceNameById( Integer.valueOf(strProid));
        }


        //使用HttpServletResponse输出数据
        // servlet返回给浏览器的是 文本数据， 数据的编码是utf-8
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw  = resp.getWriter();
        //pw.println("中国");
        pw.println(name);
        pw.flush();
        pw.close();
    }
}

4、web.xml代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--声明servlet-->
    <servlet>
        <servlet-name>QueryProvice</servlet-name>
        <servlet-class>com.bjpowernode.controller.QueryProviceServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryProvice</servlet-name>
        <url-pattern>/queryProvice</url-pattern>
    </servlet-mapping>

</web-app>

3、数据库

city表

在这里插入图片描述

创建city表的sql代码

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `city`;
CREATE TABLE `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `provinceid` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;


INSERT INTO `city` VALUES ('1', '石家庄市', '1');
INSERT INTO `city` VALUES ('2', '秦皇岛', '1');
INSERT INTO `city` VALUES ('3', '保定市', '1');
INSERT INTO `city` VALUES ('4', '张家口', '1');
INSERT INTO `city` VALUES ('5', '南昌市', '9');
INSERT INTO `city` VALUES ('6', '九江市', '9');
INSERT INTO `city` VALUES ('7', '宜春市', '9');
INSERT INTO `city` VALUES ('8', '福州市', '8');
INSERT INTO `city` VALUES ('9', '厦门市', '8');
INSERT INTO `city` VALUES ('10', '泉州市', '8');
INSERT INTO `city` VALUES ('11', '龙岩市', '8');
INSERT INTO `city` VALUES ('12', '太原', '2');
INSERT INTO `city` VALUES ('13', '大同', '2');
INSERT INTO `city` VALUES ('14', '呼和浩特', '3');
INSERT INTO `city` VALUES ('15', '包头', '3');
INSERT INTO `city` VALUES ('16', '呼伦贝尔', '3');

province表

在这里插入图片描述

创建province表的sql代码

SET FOREIGN_KEY_CHECKS=0;


DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` 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', '江西', '赣', '南昌');

4、笔记

QueryProviceServlet通过extends HttpServlet让其变成Servlet文件，每建立一个Servlet文件需要在web.xml中配置一下。
index.jsp创建异步对象调用open传参到QueryProviceServlet中，QueryProviceServlet得到参数后创建ProvinceDao对象，然后调用它的方法queryProviceNameById（）来驱动ProvinceDao类去建立数据库连接并访问数据库获取相应的值，queryProviceNameById（）方法返回name,QueryProviceServlet得到name后使用HttpServletResponse输出数据，index.jsp通过异步对象的xmlHttp.responseText得到的数据后再去更新dom对象的数据，至此在文本框中完成数据的输出。
entity包下的东西本题用不着，可不用实现。

Ajax---根据id从数据库查找对应的省份名称

使用Ajax访问数据库并实现局部更新

1、项目清单

2、代码

1 、index.jsp代码

3、ProvinceDao类代码

3、QueryProviceServlet代码

4、web.xml代码

3、数据库

city表

创建city表的sql代码

province表

创建province表的sql代码

4、笔记

猜你喜欢