zoukankan html css js c++ java

地址的三级联动（jQuery+servlet）

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

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 id="frm">
 
        住址:
        <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 pId=request.getParameter("pId");
        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 cId=request.getParameter("cId");
        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");
    }
}

查看全文

相关阅读:
一种解决h5页面背景音乐不能自动播放的方案
 VUE中的v-if与v-show
setInterval(code, time)中code传递参数办法
 CSS——图片替换方法比较
 JSON(三）——java中对于JSON格式数据的解析之json-lib与jackson
JSON（二）——JavaScript中js对象与JSON格式字符串的相互转换
 JSON(一）——JSON与JavaScript的关系
 详解Ajax请求（四）——多个异步请求的执行顺序
 详解Ajax请求（三）——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧
 详解Ajax请求（二）——异步请求原理的分析

原文地址：https://www.cnblogs.com/leafarmyarmy/p/10451310.html