js实现省市县三级级联

最新推荐文章于 2022-08-05 20:23:56 发布

CellIce

最新推荐文章于 2022-08-05 20:23:56 发布

阅读量238

点赞数

文章标签： json java ajax jsp

本文链接：https://blog.csdn.net/CellIce/article/details/107614857

版权

jsp文件如下：

<%@ 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="./js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="./js/json2.js"></script>
	</head>
	<body>
		<select id="province" onchange="getCity()">
			<option value="">--请选择省份--</option>
		</select>
		
		<select id="city" onchange="getCounty()">
			<option value="">--请选择市--</option>
		</select>
		
		<select id="county">
			<option value="">--请选择县/区--</option>
		</select>
		<script type="text/javascript">
			var object = {
				url:"./DataServlet?code="+"",
				type:"get",
				success:function(data){
					var provinces = JSON.parse(data);
					var options = "<option value=\"\">--请选择省份--</option>";
					for(var i=0;i<provinces.length;i++){
						options = options+"<option value=\""+provinces[i].code+"\">"+provinces[i].name+"</option>"
					}
					$("#province").empty();
					$("#province").append(options);
				}
			};
			$.ajax(object);
			
			function getCity(){
				var code = $("#province").val();
				if(code==""){
					$("#city").empty();
					$("#county").empty();
					$("#city").append("<option value=\"\">--请选择市--</option>");
					$("#county").append("<option value=\"\">--请选择县/区--</option>");
					return;
				}
				var object = {
					url:"./DataServlet?code="+code,
					type:"get",
					success:function(data){
						var cities = JSON.parse(data);
						var options = "<option value=\"\">--请选择市--</option>";
						for(var i=0;i<cities.length;i++){
							options = options+"<option value=\""+cities[i].code+"\">"+cities[i].name+"</option>"
						}
						$("#city").empty();
						$("#city").append(options);
						$("#county").empty();
						$("#county").append("<option value=\"\">--请选择县/区--</option>");
					}
				};
				$.ajax(object);
			}
			
			function getCounty(){
				var code = $("#city").val();
				if(code==""){
					$("#county").empty();
					$("#county").append("<option value=\"\">--请选择县/区--</option>");
					return;
				}
				var object = {
					url:"./DataServlet?code="+code,
					type:"get",
					success:function(data){
						var counties = JSON.parse(data);
						var options = "<option value=\"\">--请选择县/区--</option>";
						for(var i=0;i<counties.length;i++){
							options = options+"<option value=\""+counties[i].code+"\">"+counties[i].name+"</option>"
						}
						$("#county").empty();
						$("#county").append(options);
					}
				};
				$.ajax(object);
			}
		</script>
	</body>
</html>

servlet文件：

package com.jd.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.jd.imp.IAreaService;
import com.jd.service.AreaService;
import com.jd.util.db.DBUtil;
import com.jd.util.db.IRowMapper;
import com.jd.vo.Area;

public class DataServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private IAreaService areaService = new AreaService();

	@Override
	public void destroy() {
		super.destroy();
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/plain; charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		//获取code值，即省份代码
		String code = request.getParameter("code");
		List<Area> list = areaService.select(code);
		/*String code = request.getParameter("code");
		class RowMapper implements IRowMapper{
			//将数据存储到list集合中
			List<Area> list = new ArrayList<Area>();
			
			public void rowMapper(ResultSet resultSet) {
				try {
					while(resultSet.next()) {
						list.add(new Area(resultSet.getString("id"), resultSet.getString("name"), resultSet.getString("code"), resultSet.getString("parent_code")));
					}
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		}
		//从数据库中查询数据
		String sql = "select * from area where parent_code=?";
		RowMapper rowMapper = new RowMapper();
		DBUtil.select(sql, rowMapper, code);
		
		List<Area> list = rowMapper.list;
		*/
		//json 数据结构:将Java对象转换为字符串

		PrintWriter out = response.getWriter();
		out.print(new Gson().toJson(list));
		out.flush();
		out.close();
	}
}

为了使代码方便管理，设置成如下结构：
在这里插入图片描述
接口如下：

package com.jd.imp;

import com.jd.vo.Area;

import java.util.List;

public interface IAreaService {
    List<Area> select(String code);
}

package com.jd.imp;

import com.jd.vo.Area;

import java.util.List;

public interface IAreaDao {
    List<Area> select(String code);
}

实现类如下：

package com.jd.service;

import com.jd.dao.AreaDao;
import com.jd.imp.IAreaDao;
import com.jd.imp.IAreaService;
import com.jd.vo.Area;

import java.util.List;

public class AreaService implements IAreaService {
    private IAreaDao areaDao = new AreaDao();
    @Override
    public List<Area> select(String code) {
        if (code==null){
            code="";
        }
        return  areaDao.select(code);
    }
}

package com.jd.dao;

import com.jd.imp.IAreaDao;
import com.jd.util.db.DBUtil;
import com.jd.util.db.IRowMapper;
import com.jd.vo.Area;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class AreaDao implements IAreaDao {
    @Override
    public List<Area> select(String code) {
        class RowMapper implements IRowMapper {
            //将数据存储到list集合中
            List<Area> list = new ArrayList<Area>();

            public void rowMapper(ResultSet resultSet) {
                try {
                    while(resultSet.next()) {
                        list.add(new Area(resultSet.getString("id"), resultSet.getString("name"), resultSet.getString("code"), resultSet.getString("parent_code")));
                    }
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        //从数据库中查询数据
        String sql = "select * from area where parent_code=?";
        RowMapper rowMapper = new RowMapper();
        DBUtil.select(sql, rowMapper, code);
        return rowMapper.list;

    }
}

Area对象：

package com.jd.vo;

public class Area {
	private String id;
	private String name;
	private String code;
	private String parentCode;
	
	public Area(String id, String name, String code, String parentCode) {
		this.id = id;
		this.name = name;
		this.code = code;
		this.parentCode = parentCode;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getParentCode() {
		return parentCode;
	}
	public void setParentCode(String parentCode) {
		this.parentCode = parentCode;
	}
	@Override
	public String toString() {
		return "Area [id=" + id + ", name=" + name + ", code=" + code + ", parentCode=" + parentCode + "]";
	}
}

util包下为连接数据库工具，用于连接数据库并进行数据操作。

CellIce

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现省市县三级级联

jsp文件如下：<%@ 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-eq
复制链接

扫一扫