原生Ajax级联菜单

标签: servlet  ajax

原生Ajax级联菜单

在用户填写地址的时候,可能选择省份,而后在选择对应的城市,此时我们应让出现的可选城市都在选好的省份中。
1.VO类

package com.ajax.vo;

import java.io.Serializable;

@SuppressWarnings("serial")
public class Province implements Serializable{
    private Integer prid;
    private String proName;
    private String spell;
    //方法略
}
package com.ajax.vo;

import java.io.Serializable;

@SuppressWarnings("serial")
public class City implements Serializable {
    private Integer cid;
    private String cName;
    private Integer prid;
    //方法略
}

2.数据层

package com.ajax.dbc;

import com.alibaba.druid.pool.DruidDataSource;

import javax.sql.DataSource;
import java.sql.Connection;

public class DBConnection {
    private static DruidDataSource ds = null;
    
    static{
        try{
            ds = new DruidDataSource();
            // 2. 设置连接数据的信息(四要素)
            ds.setDriverClassName("com.mysql.cj.jdbc.Driver");
            ds.setUrl("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT");
            ds.setUsername("root");
        }catch(Exception e){
            e.printStackTrace();
        }
    }
    
    public static DataSource getDs(){
        return ds;
    }
    
    public static Connection getConnection(){
        Connection con = null;
        try{
            con = ds.getConnection();
        }catch(Exception e){
            e.printStackTrace();
        }
        return con;
    }
    
    public static void close(Connection con){
        try{
            con.close();
        }catch(Exception e){
            e.printStackTrace();
        }
    }
}
package com.ajax.dao;

import com.ajax.vo.City;

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

public interface ICityDAO {
    public List<City> findAllByCRID(int CRID)throws SQLException;
}
package com.ajax.dao;

import com.ajax.vo.Province;

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

public interface IProvinceDAO {
    public List<Province> findAll() throws SQLException;
}
package com.ajax.dao.impl;

import com.ajax.dao.ICityDAO;
import com.ajax.dbc.DBConnection;
import com.ajax.vo.City;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

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

public class CityDAOImpl implements ICityDAO{
    @Override
    public List<City> findAllByCRID(int CRID) throws SQLException {
        String sql = "SELECT CID,CName,PRID FROM city WHERE PRID=?";
        QueryRunner queryRunner = new QueryRunner(DBConnection.getDs());
        return queryRunner.query(sql,new BeanListHandler<City>(City.class),CRID);
    }
}
package com.ajax.dao.impl;

import com.ajax.dao.IProvinceDAO;
import com.ajax.dbc.DBConnection;
import com.ajax.vo.Province;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

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

public class ProvinceDAOImpl implements IProvinceDAO {
    @Override
    public List<Province> findAll() throws SQLException {
        String sql = "SELECT PRID,ProName,Spell FROM province";
        QueryRunner runner = new QueryRunner(DBConnection.getDs());
        return runner.query(sql,new BeanListHandler<Province>(Province.class));
    }
}

3.业务层

package com.ajax.service;

import com.ajax.vo.City;

import java.util.List;

public interface ICityService {
    public List<City> listByPRID(int PRID);
}
package com.ajax.service;

import com.ajax.vo.Province;

import java.util.List;

public interface IProvinceService {
    public List<Province> list();
}
package com.ajax.service.impl;

import com.ajax.factory.DAOFactory;
import com.ajax.service.ICityService;
import com.ajax.vo.City;

import java.util.List;

public class CityServiceImpl implements ICityService {

    @Override
    public List<City> listByPRID(int PRID) {
        try{
            return DAOFactory.getICityDAOInstance().findAllByCRID(PRID);
        }catch(Exception e){
            e.printStackTrace();
        }
        return null;
    }
}
package com.ajax.service.impl;

import com.ajax.factory.DAOFactory;
import com.ajax.service.IProvinceService;
import com.ajax.vo.Province;

import java.util.List;

public class ProvinceServiceImpl implements IProvinceService {
    @Override
    public List<Province> list() {
        try{
            return DAOFactory.getIProvinceDAOInstance().findAll();
        }catch(Exception e){
            e.printStackTrace();
        }
        return null;
    }
}

4.工厂类

package com.ajax.factory;

import com.ajax.dao.ICityDAO;
import com.ajax.dao.IProvinceDAO;
import com.ajax.dao.impl.CityDAOImpl;
import com.ajax.dao.impl.ProvinceDAOImpl;

public class DAOFactory {
    public static IProvinceDAO getIProvinceDAOInstance(){
        return new ProvinceDAOImpl();
    }

    public static ICityDAO getICityDAOInstance(){
        return new CityDAOImpl();
    }
}
package com.ajax.factory;

import com.ajax.service.ICityService;
import com.ajax.service.IProvinceService;
import com.ajax.service.impl.CityServiceImpl;
import com.ajax.service.impl.ProvinceServiceImpl;

public class ServiceFactory {
    public static IProvinceService getIProvinceServiceInstance(){
        return new ProvinceServiceImpl();
    }
    public static ICityService getICityServiceInstance(){
        return new CityServiceImpl();
    }
}

5.控制器

package com.ajax.servlet;

import com.ajax.factory.ServiceFactory;
import com.ajax.vo.City;
import com.ajax.vo.Province;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

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.UnsupportedEncodingException;
import java.lang.reflect.Method;
import java.util.Iterator;

@WebServlet(urlPatterns = "/AddressServlet/*")
public class AddressServlet extends HttpServlet {
    private HttpServletRequest request;
    private HttpServletResponse response;

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.request = request;
        this.response = response;
        String methodName = request.getRequestURI().substring(
                request.getRequestURI().lastIndexOf("/")+1);
        try{
            Method method = this.getClass().getMethod(methodName);
            method.invoke(this);
        }catch(Exception e){
            e.printStackTrace();
        }
    }

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

    public void province(){
        try {
            this.request.setCharacterEncoding("UTF-8");
            this.response.setCharacterEncoding("UTF-8");
            this.response.setContentType("text/xml");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        Iterator<Province> iter = ServiceFactory.getIProvinceServiceInstance().list().iterator();
        Document document = DocumentHelper.createDocument();
        Element provincesEle = document.addElement("provinces");
        while(iter.hasNext()){
            Province province = iter.next();
            Element provinceEle = provincesEle.addElement("province");
            provinceEle.addElement("PRID").setText(String.valueOf(province.getPrid()));
            provinceEle.addElement("ProName").setText(province.getProName());
        }
        try {
            OutputFormat format = new OutputFormat();
            format.setEncoding("UTF-8");
            XMLWriter writer = new XMLWriter(this.response.getWriter(),format);
            writer.write(document);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public void city(){
        try {
            this.request.setCharacterEncoding("UTF-8");
            this.response.setCharacterEncoding("UTF-8");
            this.response.setContentType("text/xml");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        Integer PRID = Integer.parseInt(this.request.getParameter("PRID"));
        Iterator<City> iter = ServiceFactory.getICityServiceInstance().listByPRID(PRID).iterator();
        Document document = DocumentHelper.createDocument();
        Element citysEle = document.addElement("citys");
        while(iter.hasNext()){
            City city = iter.next();
            Element cityEle = citysEle.addElement("city");
            cityEle.addElement("CID").setText(String.valueOf(city.getCid()));
            cityEle.addElement("cName").setText(city.getcName());
        }
        try {
            OutputFormat format = new OutputFormat();
            format.setEncoding("UTF-8");
            XMLWriter writer = new XMLWriter(this.response.getWriter(),format);
            writer.write(document);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

6.显示层

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="UTF-8" %>
<%
    String basePath = request.getScheme()+"://"+request.getServerName()
            +":"+request.getServerPort()+request.getContextPath();
    String cityPath = basePath+"/AddressServlet/city";
    String provincePath = basePath+"/AddressServlet/province";
%>
<html>
<head>
    <title>Address</title>
</head>
<body>
<label>省:</label>
<select id="province" >
   <option value="0">====请选择省份====</option>
</select>
<label>市:</label>
<select id="city">
    <option value="0">====请选择市====</option>
</select>
<script type="text/javascript">
    var xmlHttpRequest;
    function create(){
        if(window.XMLHttpRequest){
            xmlHttpRequest = new XMLHttpRequest();
        }else{
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
        }
    }
    function createProvince(PRID,ProName){
        var provinceEle = document.getElementById("province");
        var optionEle = document.createElement("option");
        optionEle.appendChild(document.createTextNode(ProName));
        optionEle.setAttribute("value",PRID);
        provinceEle.appendChild(optionEle);
    }
    function createCity(data){
        var cityEle = document.getElementById("city");
        var CIDEles = data.getElementsByTagName("CID");
        var cNameEles = data.getElementsByTagName("cName");
        for(var x=0;x<CIDEles.length;x++){
            var CID = CIDEles[x].firstChild.nodeValue;
            var CName = cNameEles[x].firstChild.nodeValue;
            var optionEle = document.createElement("option");
            optionEle.appendChild(document.createTextNode(CName));
            optionEle.setAttribute("value",CID);
            cityEle.appendChild(optionEle);
        }
    }
    function clearAllCity(){
        var cityEle = document.getElementById("city");
        var optionEle = cityEle.getElementsByTagName("option");
        var len = optionEle.length-1;
        for(var x=0;x<len;x++){
            cityEle.removeChild(optionEle[1]);
        }
    }
    function loadCity(){
        clearAllCity();
        var PRID = document.getElementById("province").value;
        xmlHttpRequest.open("post","<%=cityPath%>?PRID="+PRID);
        xmlHttpRequest.send(null);
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                var data = xmlHttpRequest.responseXML;
                createCity(data);
            }
        }
    }
    window.onload = function(){
        create();
        xmlHttpRequest.open("post","<%=provincePath%>");
        xmlHttpRequest.send(null);
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                var data = xmlHttpRequest.responseXML;
                var PRIDEles = data.getElementsByTagName("PRID");
                var ProNameEles = data.getElementsByTagName("ProName");
                for(var x=0;x<PRIDEles.length;x++){
                    var PRID = PRIDEles[x].firstChild.nodeValue;
                    var ProName = ProNameEles[x].firstChild.nodeValue;
                    createProvince(PRID,ProName);
                }
            }
        };
        document.getElementById("province").addEventListener("change",function(){
            loadCity();
        },false);
    }
</script>
</body>
</html>

此时执行此程序,发现操作正常完成:

版权声明:本文为Nicholas_GUB原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Nicholas_GUB/article/details/106736387

智能推荐

POJ2348 UVa10368 HDU1525 Euclid's Game【博弈】

Euclid's GameTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 4106    Accepted Submission(s): 1947 Probl...

使用Breeze.js编写更好的查询

这篇文章是由同行评审Agbonghama柯林斯 。 感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的! 数据量正在迅速发展,他们正在变得越来越复杂,维护。 许多开发人员希望避免由数据问题他们的工作过程中造成的问题和头痛。 一个使我们的工作更轻松的图书馆是Breeze.js 。 在这篇文章中,我们将讨论我们如何能够写出更好的查询与Breeze.js。 但是首先,我们应该知道什...

Netty框架构建Nio编程

~~~ 随手点赞,养成习惯 ~~~ 为什么选择Netty框架 Netty是业界最流行的NIO框架之一,它的健壮性、功能、性能、可定制性和可扩展性在同类框架中都是首屈一指的。 优点: ① API使用简单,开发门槛低 ②功能强大,预置了多种编解码功能,支持多种主流协议 ③ 定制能力强,可以通过ChannelHandler对通信框架进行灵活地扩展; ④性能高,通过与其他业界主流的NIO框架对比,Nett...

【JZOJ5262】【GDOI2018模拟8.12】树(DP,性质题)

Description Solution 首先我们可以知道两个性质:1、路径u-v和路径v-w可以合并为路径u-w;2、路径u1-v1加路径u2-v2和路径u1-v2加路径u2-v1是等价的(就是起始点和终点可以互换) 那么知道这些性质之后就很好做了。我们只用知道每个点多少次做起点和多少次做终点。 我们设f[i]表示满足i子树的需求i上的值要是多少。 那么枚举i的所有儿子,判断a[i]-f[i],...

【String-easy】541. Reverse String II 反转的元素,有反转个数和间隔

1. 题目原址 https://leetcode.com/problems/reverse-string-ii/ 2. 题目描述 3. 题目大意 给定一个字符串,和字符串的间隔k, 这个k表示每k个数反转一次,然后再间隔k个元素再反转k个元素。 4. 解题思路 只要按照间隔去反转就可以了。然后间隔k个元素不反转是通过让i每次递增 2*k完成的。 5. AC代码 6. 相似题型 【1】344. Re...

猜你喜欢

【C语言笔记结构体】

我们都知道C语言中变量的类型决定了变量存储占用的空间。当我们要使用一个变量保存年龄时可以将其声明为int类型,当我们要使用一个变量保存某一科目的考试成绩时可以将其声明为float。 那么,当我们要做一个学生信息管理系统时,需要保存学生的姓名、学号、年龄等信息,该怎么做呢? 如当要保存三个学生的信息时, 方法一是: 方法二是: 显然,方法二跟更清晰,因为它把name、num、age都集成在一个模板,...

39. Combination Sum 回溯算法简析

LeetCode传送门     这道题要求给你一组正数 C,然后给你一个目标数 T,让你从那组C中找到加在一起等于 T 的那些组合。     例如:给你 [2,3,6,7] 和 7,则返回 [[2,2,3],[7] ] 。      想解决这个问题前,我们首先引入一个新问题,图(树)的遍历问题。  ...

git安装|Linux系统安装 git|Linux如何安装git?Linux通过远程安装git|

Git是一个开源的分布式版本控制系统,可以有效、高速地处理项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 开发者需要一个GIT账号,通过这个查看项目的提交记录,可以更加清楚项目的开发情况,便于版本控制。 以下介绍在CentOS8操作系统搭建GIT服务器。   一、安装GIT服务器流程   安装GIT...

Vue框架基础概要

  Vue.js是什么? Vue.js(读音 /vjuː/,类似于 view 的读音)是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。另一方面,当与单文件组件和...