广告位联系
返回顶部
分享到

详解三级联动省市ajax的代码

java 来源:转载 作者:秩名 发布时间:2021-07-18 07:37:30 人浏览
摘要

我只写到了市剩下的区可以复制粘贴的很简单 所需要的jar包有 代码如下 创建数据库 CREATE database provinces CHARACTER set utf8;use provices;CREATE table province (pid INT PRIMARY KEY auto_increment,pname varchar(20));INSERT into province VALUES

我只写到了市剩下的区可以复制粘贴的很简单

所需要的jar包有

代码如下

创建数据库

CREATE database provinces CHARACTER  set utf8;
use provices;

CREATE table  province (
pid INT PRIMARY KEY  auto_increment,
pname varchar(20)
);

INSERT into province VALUES (null,"河南省");
INSERT into province VALUES (null,"海南省");
INSERT into province VALUES (null,"台湾省");
INSERT into province VALUES (null,"山东省");
INSERT into province VALUES (null,"河北省");
CREATE table  city (
cid INT PRIMARY KEY  auto_increment,
cname varchar(20),
pid int
);
INSERT into city VALUES(null,"漯河市",1);
INSERT into city VALUES(null,"菏泽曹县",4);
INSERT into city VALUES(null,"高雄市",3);
INSERT into city VALUES(null,"保定",5);
INSERT into city VALUES(null,"三亚市",2);

首先创建 City 和 Province 类 给getter setter tostring 以及 构造方法 Province类
 
package cn.hp.model;
public class Province {
    private  int pid;
    private  String pname;
    public int getPid() {
        return pid;
    }
    public void setPid(int pid) {
        this.pid = pid;
    }
    public String getPname() {
        return pname;
    }
    public void setPname(String pname) {
        this.pname = pname;
    }
    @Override
    public String toString() {
        return "Province{" +
                "pid=" + pid +
                ", pname='" + pname + ''' +
                '}';
    }
    public Province(int pid, String pname) {
        this.pid = pid;
        this.pname = pname;
    }
    public Province() {
    }
}

City类
 
package cn.hp.model;
public class City {
    private  int cid;
    private String cname;
    private  int pid;
    public City() {
    }
    public int getCid() {
        return cid;
    }
    @Override
    public String toString() {
        return "City{" +
                "cid=" + cid +
                ", cname='" + cname + ''' +
                ", pid=" + pid +
                '}';
    }
    public void setCid(int cid) {
        this.cid = cid;
    }
    public String getCname() {
        return cname;
    }
    public City(String cname, int pid) {
        this.cname = cname;
        this.pid = pid;
    }
    public void setCname(String cname) {
        this.cname = cname;
    }
    public int getPid() {
        return pid;
    }
    public void setPid(int pid) {
        this.pid = pid;
    }
    public City(int cid, String cname, int pid) {
        this.cid = cid;
        this.cname = cname;
        this.pid = pid;
    }
}

连接数据库
 
package cn.hp.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class ConnDemo {
    private static String Driver ="com.mysql.jdbc.Driver";
    private static String Url = "jdbc:mysql://localhost:3306/provinces?characterEncoding=utf8";
    private static String user ="root";
    private static String pwd ="123456";
    public static Connection conn;
    public static Connection getConn() {
        try {
            Class.forName(Driver);
            conn = DriverManager.getConnection(Url, user, pwd);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return conn;
    }

    public static void getClose() {
        try {
            if (conn != null) {
                conn.close();
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    // �������ݿ�����
    public static void main(String[] args) {
        System.out.println(getConn());
        if (getConn()!=null) {
            System.out.println("���ӳɹ�");
        }
    }
}

创建 接口 ProvinceInfoDao
 
package cn.hp.dao;
import cn.hp.model.Province;
import java.util.List;
public interface ProvinceInfoDao {
    public  List<Province> findAll();
}

实例化对象ProvinceInfoDaoImpl
 
package cn.hp.dao;
import cn.hp.model.Province;
import cn.hp.util.ConnDemo;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class ProvinceInfoDaoImpl implements ProvinceInfoDao {
    @Override
    public List<Province> findAll() {
     Connection conn=   ConnDemo.getConn();
     List<Province> list= new ArrayList<Province>();
     String sql="select * from provice";
        try {
            PreparedStatement ps= conn.prepareStatement(sql);
          ResultSet rs=  ps.executeQuery();
          while (rs.next()){
              Province p= new Province();
              p.setPid(rs.getInt(1));
              p.setPname(rs.getString(2));
              list.add(p);
          }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }
}

以及CityInfoDao接口
 
package cn.hp.dao;
import cn.hp.model.City;
import java.util.List;
public interface CityInfoDao {
    public  List<City>findAllCity(int pid);
}

CityInfoDaoImpl实例化对象
 
package cn.hp.dao;
import cn.hp.model.City;
import cn.hp.model.Province;
import cn.hp.util.ConnDemo;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class CityInfoDaoImpl implements  CityInfoDao {
    @Override
    public List<City> findAllCity(int pid) {
        Connection conn=  ConnDemo.getConn();
        List<City> list= new ArrayList<City>();
        String sql="select * from city where pid =?";
        try {
            PreparedStatement ps= conn.prepareStatement(sql);
            ps.setInt(1,pid);
            ResultSet rs=  ps.executeQuery();
            while (rs.next()){
                City c= new City();
               c.setCid(rs.getInt(1));
               c.setCname(rs.getString(2));
               c.setPid(rs.getInt(3));
                list.add(c);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }
}

写servlet FindProvinceServlet 以及FindCityPidServlet

FindProvinceServlet

package cn.hp.servlet;
import cn.hp.dao.ProvinceInfoDao;
import cn.hp.dao.ProvinceInfoDaoImpl;
import cn.hp.model.Province;
import com.alibaba.fastjson.JSONObject;
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.util.List;
@WebServlet("/findProvince")
public class FindProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        ProvinceInfoDao pid=new ProvinceInfoDaoImpl();
        List<Province> plist =pid.findAll();
        response.getWriter().write(JSONObject.toJSONString(plist));
    }
}

FindCityPidServlet
 
package cn.hp.servlet;
import cn.hp.dao.CityInfoDao;
import cn.hp.dao.CityInfoDaoImpl;
import cn.hp.model.City;
import com.alibaba.fastjson.JSONObject;
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.util.List;
@WebServlet("/findCityByPid")
public class FindCityByPidServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String id = request.getParameter("id");
        CityInfoDao cid= new CityInfoDaoImpl();
        List<City> clist  = cid.findAllCity(Integer.parseInt(id));
        response.getWriter().write(JSONObject.toJSONString(clist));

    }
}

最后是jsp页面
 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
    <title>$Title$</title>
      <script>
          $(function () {
             $.ajax({
                 type:"get",
                 url:"findProvince",
                 dataType:"json",
                 success:function (data) {
                  var obj=  $("#province");
                  for (var i=0;i<data.length;i++){
                      // var  ob= "<option value='+data[i].pid+"'>"+data[i].pname+"</option>"
                      var  ob= "<option value='"+data[i].pid+"'>"+data[i].pname+"</option>"
                      obj.append(ob)
                     }
                 }
             })
          })
      </script>
  </head>
  <body>
   <select name="province" id="province">
     <option value="0">请选择</option>
   </select>省
   <select name="city" id="city">
     <option value="0">请选择</option>
   </select>市
   <select name="street" id="street">
     <option value="0">请选择</option>
   </select>区
  </body>
<script>
    $("#province").change(function () {
       $("#city option").remove();
       $.ajax({
           type:"get",
           url:"findCityByPid?id="+$("#province").val(),
           dataType: "json",
           success:function (data) {
               var obj=  $("#city");
               for (var i=0;i<data.length;i++){
                   var  ob= "<option value='"+data[i].cid+"'>"+data[i].cname+"</option>"
                   obj.append(ob)
               }
           }
       })
    });
</script>
</html>


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/best_p1/article/details/118033420
相关文章
  • SpringBoot自定义错误处理逻辑介绍

    SpringBoot自定义错误处理逻辑介绍
    1. 自定义错误页面 将自定义错误页面放在 templates 的 error 文件夹下,SpringBoot 精确匹配错误信息,使用 4xx.html 或者 5xx.html 页面可以打印错误
  • Java实现手写一个线程池的代码

    Java实现手写一个线程池的代码
    线程池技术想必大家都不陌生把,相信在平时的工作中没有少用,而且这也是面试频率非常高的一个知识点,那么大家知道它的实现原理和
  • Java实现断点续传功能的代码

    Java实现断点续传功能的代码
    题目实现:网络资源的断点续传功能。 二、解题思路 获取要下载的资源网址 显示网络资源的大小 上次读取到的字节位置以及未读取的字节
  • 你可知HashMap为什么是线程不安全的
    HashMap 的线程不安全 HashMap 的线程不安全主要体现在下面两个方面 在 jdk 1.7 中,当并发执行扩容操作时会造成环形链和数据丢失的情况 在
  • ArrayList的动态扩容机制的介绍

    ArrayList的动态扩容机制的介绍
    对于 ArrayList 的动态扩容机制想必大家都听说过,之前的文章中也谈到过,不过由于时间久远,早已忘却。 所以利用这篇文章做做笔记,加
  • JVM基础之字节码的增强技术介绍

    JVM基础之字节码的增强技术介绍
    字节码增强技术 在上文中,着重介绍了字节码的结构,这为我们了解字节码增强技术的实现打下了基础。字节码增强技术就是一类对现有字
  • Java中的字节码增强技术

    Java中的字节码增强技术
    1.字节码增强技术 字节码增强技术就是一类对现有字节码进行修改或者动态生成全新字节码文件的技术。 参考地址 2.常见技术 技术分类 类
  • Redis BloomFilter布隆过滤器原理与实现

    Redis BloomFilter布隆过滤器原理与实现
    Bloom Filter 概念 布隆过滤器(英语:Bloom Filter)是1970年由一个叫布隆的小伙子提出的。它实际上是一个很长的二进制向量和一系列随机映射
  • Java C++算法题解leetcode801使序列递增的最小交换次

    Java C++算法题解leetcode801使序列递增的最小交换次
    题目要求 思路:状态机DP 实现一:状态机 Java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 class Solution { public int minSwap(int[] nums1, int[] nums2) { int n
  • Mybatis结果集映射与生命周期介绍

    Mybatis结果集映射与生命周期介绍
    一、ResultMap结果集映射 1、设计思想 对简单的语句做到零配置,对于复杂一点的语句,只需要描述语句之间的关系就行了 2、resultMap的应用场
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计