Ajax实现省市县三级联动

本文实例为大家分享了ajax实现省市县三级联动的具体代码,供大家参考,具体内容如下

首先建立数据库,如下所示

接口

import java.util.list;
public interface provincedao {
 list<province> findall();
}

import java.util.list;
public interface citydao {
 list<city> findcitybypid(int pid);
}

import java.util.list;
public interface areadao {
 list<area> findareabycid(int cid);
}

接口实现类

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 provincedaoimpl implements provincedao{
 public list<province> findall(){
 connection conn = dbhelper.getconn();
 arraylist<province> provinces = new arraylist<province>();
 string sql = "select * from aprovince";
 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));
 provinces.add(p);
 }
 } catch (sqlexception e) {
 e.printstacktrace();
 }
 return provinces;
 }
}

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 citydaoimpl implements citydao {
 @override
 public list<city> findcitybypid(int pid) {
 connection conn = dbhelper.getconn();

 arraylist<city> cities = new arraylist<>();

 string sql = "select * from acity where pid=?";

 try {
 preparedstatement ps = conn.preparestatement(sql);
 ps.setint(1,pid);
 resultset rs = ps.executequery();
 while (rs.next()){
 city city = new city();
 city.setpid(rs.getint(3));
 city.setcid(rs.getint(1));
 city.setcname(rs.getstring(2));
 cities.add(city);
 }
 } catch (sqlexception e) {
 e.printstacktrace();
 }
 return cities;
 }
}

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 areadaoimpl implements areadao {
 @override
 public list<area> findareabycid(int cid) {
 connection conn = dbhelper.getconn();
 arraylist<area> areas = new arraylist<>();
 string sql = "select * from aarea where cid=?";

 try {
 preparedstatement ps = conn.preparestatement(sql);
 ps.setint(1,cid);
 resultset rs = ps.executequery();
 while (rs.next()){
 area area = new area();
 area.setcid(rs.getint(3));
 area.setaid(rs.getint(1));
 area.setaname(rs.getstring(2));
 areas.add(area);
 }
 } catch (sqlexception e) {
 e.printstacktrace();
 }
 return areas;
 }
}

servlet

package cn.zhc.servlet;

import cn.zhc.dao.impl.provincedaoimpl;
import cn.zhc.dao.provincedao;
import cn.zhc.domin.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("/findall")
public class findall extends httpservlet {
 protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
 request.setcharacterencoding("utf-8");
 response.setcontenttype("text/html;charset=utf-8");

 provincedao provincedao = new provincedaoimpl();
 list<province> lists=provincedao.findall();

 response.getwriter().write(jsonobject.tojsonstring(lists));
 }
 protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
 this.dopost(request, response);
 }
}

package cn.zhc.servlet;

import cn.zhc.dao.citydao;
import cn.zhc.dao.impl.citydaoimpl;
import cn.zhc.domin.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 findcitybypid extends httpservlet {
 protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
 request.setcharacterencoding("utf-8");
 response.setcontenttype("text/html;charset=utf-8");

 string pid = request.getparameter("pid");

 citydao citydao = new citydaoimpl();
 list<city> citylist = citydao.findcitybypid(integer.parseint(pid));

 response.getwriter().write(jsonobject.tojsonstring(citylist));
 }

 protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
 this.dopost(request, response);
 }
}

package cn.zhc.servlet;

import cn.zhc.dao.areadao;
import cn.zhc.dao.impl.areadaoimpl;
import cn.zhc.domin.area;
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("/findareabycid")
public class findareabycid extends httpservlet {
 protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
 request.setcharacterencoding("utf-8");
 response.setcontenttype("text/html;charset=utf-8");

 string cid = request.getparameter("cid");

 areadao areadao = new areadaoimpl();
 list<area> areas = areadao.findareabycid(integer.parseint(cid));

 response.getwriter().write(jsonobject.tojsonstring(areas));
 }

 protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
 this.dopost(request, response);
 }
}

jsp页面

<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
 <title>三级联动</title>
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
 $(function () {
 $.ajax({
 type:"get",
 url:"findall",
 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>";
 obj.append(ob);
 }
 }
 })

 $("#province").change(function () {
 $("#city option").remove();
 $.ajax({
 type:"get",
 async:false,
 url:"findcitybypid?pid="+$("#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);
 }
 }
 })
 });

 $("#city,#province").change(function () {
 $("#area option").remove();
 $.ajax({
 type:"get",
 async:false,
 url:"findareabycid?cid="+$("#city").val(),
 datatype:"json",
 success:function (data) {
 var obj=$("#area");
 for(var i=0;i<data.length;i++){
 var ob="<option value='"+data[i].aid+"'>"+data[i].aname+"</option>";
 obj.append(ob);
 }
 }
 })
 });
 });
</script>
<select name="province" id="province">
 <option value="0">请选择</option>
</select>省
<select name="city" id="city">
 <option value="0">请选择</option>
</select>市
<select name="area" id="area">
 <option value="0">请选择</option>
</select>县
</body>
</html>

实现结果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持硕编程。

相关文章