Ajax实现全国省市三级联动
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="vendors/bootstrap3/js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //初始化 $.ajax({ url:"ChinaServlet", data:{}, type:"POST", dataType:"xml", success:function(sf){ var s=$(sf).find("root name").length; var op; for(var i=0;i<s;i++){ var name=$(sf).find("name").eq(i).text(); var code=$(sf).find("name").eq(i).attr("code"); op+="<option value="+code+">"+name+"</option>"; }; $("#pro").append(op); }, }); //省 $("#pro").change(function(){ var id=$(this).val(); $("#city option:gt(0)").remove(); $('#county option:gt(0)').remove(); $.ajax({ url:"ChinaServlet", data:{proId:id}, type:"POST", dataType:"xml", success:function(sf){ var s=$(sf).find("root city").length; var op; for(var i=0;i<s;i++){ var name=$(sf).find("city").eq(i).text(); var code=$(sf).find("city").eq(i).attr("code"); op+="<option value="+code+">"+name+"</option>"; }; $("#city").append(op); }, }); }); //市 $("#city").change(function(){ var id=$(this).val(); $('#county option:gt(0)').remove(); $.ajax({ url:"ChinaServlet", data:{citId:id}, type:"POST", dataType:"xml", success:function(sf){ var s=$(sf).find("root county").length; var op=null; for(var i=0;i<s;i++){ var name=$(sf).find("county").eq(i).text(); op+="<option>"+name+"</option>"; }; $("#county").append(op); }, }); }); }); </script> </head> <body> <select id="pro"> <option style="text-align: center">--请选择省份--</option> </select> <select id="city"> <option style="text-align: center">--请选择地市--</option> </select> <select id="county"> <option style="text-align: center">--请选择区县--</option> </select> </body> </html>
下面是servlet代码
package com.inba.maya.china; import java.io.IOException; import java.util.ArrayList; 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 javax.servlet.http.HttpSession; import com.inba.maya.bean.Area; import com.inba.maya.bean.City; import com.inba.maya.bean.Province; import com.inba.maya.dao.AreaDao; import com.inba.maya.dao.CityDao; import com.inba.maya.dao.ProvinceDao; /** * Servlet implementation class ChinaServlet */ @WebServlet("/ChinaServlet") public class ChinaServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public ChinaServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //转码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.getWriter().append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); response.getWriter().append("<root>"); if(request.getParameter("proId")!=null){//如果获取到省份的id String proId=request.getParameter("proId"); try { ArrayList<China> listCity=new ChinaDao().select(proId); for(China c:listCity){ response.getWriter().append("<city code='"+c.getCode()+"'>"+c.getName()+"</city>");//循环写xml文本 } } catch (Exception e) { e.printStackTrace(); } }else if(request.getParameter("citId")!=null){//如果获取到地市的id String citId=request.getParameter("citId"); try { ArrayList<China> listCounty=new ChinaDao().select(citId); for(China c:listCounty){ response.getWriter().append("<county code='"+c.getCode()+"'>"+c.getName()+"</county>");//循环写xml文本 } } catch (Exception e) { e.printStackTrace(); } }else{//当都没有获取到的时候，就是初始化的 ArrayList<China> listProv; try { listProv = new ChinaDao().select("0001"); for(China c:listProv){ response.getWriter().append("<name code='"+c.getCode()+"'>"+c.getName()+"</name>"); } } catch (Exception e) { e.printStackTrace(); } } response.getWriter().append("</root>"); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
上面是采用的xml格式来传递数据的，下面再采用JSON格式来获得数据
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //身份初始化 $.ajax({ url:"JsonTest", data:{}, type:"POST", dataType:"JSON", success:function(pro){ var s=pro.pro.length;//取出返回JSON对象中的key所对应的值（它是一个数组）的长度 var option; for(var i=0;i<s;i++){//拼接字符串循环添加城市 option+="<option value="+pro.pro[i].code+">"+pro.pro[i].name+"</option>"; } $("#pro").append(option); } }); //当省份改变时 $("#pro").change(function(){ $("#city option:gt(0)").remove(); $("#country option:gt(0)").remove(); var proId=$(this).val(); $.ajax({ url:"JsonTest", data:{proId:proId}, type:"POST", dataType:"JSON", success:function(city){ var s=city.city.length; var option; for(var i=0;i<s;i++){ option+="<option value="+city.city[i].code+">"+city.city[i].name+"</option>"; } $("#city").append(option); } }); }); //当城市改变时 $("#city").change(function(){ $("#country option:gt(0)").remove(); var cityId=$(this).val(); $.ajax({ url:"JsonTest", data:{cityId:cityId}, type:"POST", dataType:"JSON", success:function(country){ var s=country.country.length; var option; for(var i=0;i<s;i++){ option+="<option>"+country.country[i].name+"</option>"; }; $("#country").append(option); } }); }); }); </script> </head> <body> <select id="pro"> <option style="text-align: center">--请选择省份--</option> </select> <select id="city"> <option style="text-align: center">--请选择地市--</option> </select> <select id="country"> <option style="text-align: center">--请选择区县--</option> </select> </body> </html>
package com.maya.json; import java.io.IOException; import java.util.ArrayList; 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 org.json.JSONArray; import org.json.JSONObject; /** * Servlet implementation class JsonTest */ @WebServlet("/JsonTest") public class JsonTest extends HttpServlet { private static final long serialVersionUID = 1L; private ChinaDao china=new ChinaDao(); /** * @see HttpServlet#HttpServlet() */ public JsonTest() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { /* * JSON格式可以无限嵌套 * JSONObject的格式是{key:value,key:{key:value}} * JSONArray的格式是[{key:value},{key:value},{key:value},{key:value}] * * JSONObject和JSONObject相结合的格式{key:[{key:value},{key,value}]} * {省份:[{代号:名称}],[{11:北京}]} * {城市:[{代号:名称}],[{1101:北京市辖}]} * {区县:[{代号:名称}],[{110101:东城区}]} * * */ request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); JSONObject jsonObject=new JSONObject(); if(request.getParameter("proId")!=null){//初始化显示省份 String proId=request.getParameter("proId"); try { ArrayList<China> citList=china.select(proId); JSONArray objArray=new JSONArray(); for(China c:citList){ JSONObject p=new JSONObject();//把找出的每一个城市都new成一个对象，分别设置它的name和code，然后添加到数组当中 p.put("name", c.getName()); p.put("code", c.getCode()); objArray.put(p); } jsonObject.put("city", objArray);//最后把数组添加到JSONObject中 } catch (Exception e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } }else if(request.getParameter("cityId")!=null){ String cityId=request.getParameter("cityId"); try { ArrayList<China> couList=china.select(cityId); JSONArray objArray=new JSONArray(); for(China c:couList){ JSONObject p=new JSONObject(); p.put("name", c.getName()); objArray.put(p); } jsonObject.put("country", objArray); } catch (Exception e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } }else{ try { ArrayList<China> proList=china.select("0001"); JSONArray objArray=new JSONArray(); for(China c:proList){ JSONObject p=new JSONObject(); p.put("name", c.getName()); p.put("code", c.getCode()); objArray.put(p); } jsonObject.put("pro", objArray); } catch (Exception e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } } response.getWriter().append(jsonObject.toString()); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
