地址的三级联动，jQuery+servlet

2024-04-14 14:46•移动端•阅读 4221

明人不说暗话，直接上代码。

jsp页面代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册用户</title>
</head>
<script src="js/jquery-1.11.3.min.js"></script>
<body>
<form >
 
        住址:
        <select name="province" class="province">
            <option selected="selected" value="0">请选择</option>
        </select>
        <select name="city" class="city">
            <option selected="selected" value="0">请选择</option>
        </select>
        <select name="area" class="area">
            <option selected="selected" value="0">请选择</option>
        </select>
  
</form>
</body>
<script>
   
        //初始化省级
        $.ajax({
            url:"AddressServlet",
            type:"post",
            dataType:"text",
            data:"",
            success:function (data) {
                //将json字符串转化为json对象
                var json=JSON.parse(data);
                //遍历出省
                for(var i=0;i<json.length;i++){
                    $(".province").append("<option value="+json[i].pId+">"+
                        json[i].pName+
                        "</option>");
                }
            },
            error:function () {
                alert("服务器内部错误！");
            }
        });

     
        //省改变时触发
        $(".province").change(function () {
            var pId=$(this).val();
            $.ajax({
                url:"CitiesEchoServlet",
                type:"post",
                dataType:"text",
                data:{pId:pId},
                success:function (data) {
                    //将json字符串转化为json对象
                    var json=JSON.parse(data);
                    //清空市和区
                    $(".city").html("<option selected='selected' value='0'>请选择</option>");
                    $(".area").html("<option selected='selected' value='0'>请选择</option>");
                    //遍历出市
                    for(var i=0;i<json.length;i++){
                        $(".city").append("<option value="+json[i].cId+">"+
                                        json[i].cName+
                                        "</option>");
                    }
                },
                error:function () {
                    alert("服务器内部错误！");
                }
            });

        });

        //市改变时触发
        $(".city").change(function () {
            var cId=$(this).val();
            $.ajax({
                url:"AreasEchoServlet",
                type:"post",
                dataType:"text",
                data:{cId:cId},
                success:function (data) {
                    var json=JSON.parse(data);
                    $(".area").html("<option selected='selected' value='0'>请选择</option>");
                    for(var i=0;i<json.length;i++){
                        $(".area").append("<option value="+json[i].areaId+">"+
                            json[i].areaName+
                            "</option>");
                    }
                },
                error:function () {
                    alert("服务器内部错误！");
                }
            });
        });
    })
</script>
</html>

从后台获取省级数据的servlet

package servlet;


import bean.Province;
import com.alibaba.fastjson.JSON;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import service.ProvinceService;


import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
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.io.PrintWriter;
import java.util.List;

@WebServlet(value = "/AddressServlet")
public class AddressServlet extends HttpServlet {

    @Autowired
    private ProvinceService ps;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        List<Province> provs=ps.provinceList();
        out.write(JSON.toJSONString(provs));//这里是使用了FastJson中的方法将list集合解析成json字符串
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    //这里是重写httpservlet类中的init方法，从ioc容器中获得ProvinceServiceImpl对象
    @Override
    public void init(ServletConfig config) {
        ServletContext sc = config.getServletContext();
        ps=(ProvinceService) ((ClassPathXmlApplicationContext)sc.getAttribute("context")).getBean("provinceServiceImpl");
    }
}

获得市级数据的servlet：

package servlet;

import bean.City;
import com.alibaba.fastjson.JSON;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import service.CityService;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
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.io.PrintWriter;
import java.util.List;

@WebServlet(value = "/CitiesEchoServlet")
public class CitiesEchoServlet extends HttpServlet {

    @Autowired
    private CityService cs;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String ppId");
        List<City> citiesById=cs.citiesById(Integer.parseInt(pId));
        out.write(JSON.toJSONString(citiesById));//将list集合转化为json字符串并返回
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    @Override
    public void init(ServletConfig config) {
        ServletContext sc = config.getServletContext();
        cs=(CityService)((ClassPathXmlApplicationContext)sc.getAttribute("context")).getBean("cityServiceImpl");
    }
}

获得区级的servlet：

package servlet;

import bean.Area;
import com.alibaba.fastjson.JSON;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import service.AreaService;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
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.io.PrintWriter;
import java.util.List;

@WebServlet(value = "/AreasEchoServlet")
public class AreasEchoServlet extends HttpServlet {

    @Autowired
    private AreaService as;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String ccId");
        List<Area> areasById=as.areasById(Integer.parseInt(cId));
        out.write(JSON.toJSONString(areasById));//将list集合转化为json字符串并返回
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    @Override
    public void init(ServletConfig config) {
        ServletContext sc = config.getServletContext();
        as=(AreaService)((ClassPathXmlApplicationContext)sc.getAttribute("context")).getBean("areaServiceImpl");
    }
}

地址的三级联动，jQuery+servlet

相关推荐

Python 练习 - 省市县三级联动

java实现省市区三级联动

react 写的省市三级联动

vue 省市区三级联动

【巷子】---vue基于mint-ui三级联动---【vue】

angular实现地区三级联动

省市区三级联动插件：app-jquery-cityselect.js

省市县三级联动，Jquery+Json