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>
实现结果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持硕编程。