1. 技术文章
  2. Ajax实现全国省市三级联动

Ajax实现全国省市三级联动

由 别来无恙 提交于 2020-01-12 21:06:07 
<%@ 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);
    }

}
标签
ajax
jsonobject
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!