当前位置: 代码网 > it编程>前端脚本>Ajax > Ajax实现省市县三级联动

Ajax实现省市县三级联动

2024年05月18日 Ajax 我要评论
本文实例为大家分享了ajax实现省市县三级联动的具体代码,供大家参考,具体内容如下首先建立数据库,如下所示接口省import java.util.list;public interface provi

本文实例为大家分享了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>

实现结果如下:

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

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com