欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

三级联动省市ajax的代码

程序员文章站 2022-06-10 08:27:54
目录首先创建 city 和 province 类 给getter setter tostring 以及 构造方法 province类city类创建 接口 provinceinfodao实例化对象pro...

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

所需要的jar包有

三级联动省市ajax的代码

三级联动省市ajax的代码

三级联动省市ajax的代码

代码如下

创建数据库

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>

总结

本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注的更多内容!

相关标签: 三级联动 ajax