jQueryAjax----省市县三级联动

原创于 2020-09-23 09:30:47 发布 · 740 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #js #jquery #ajax

JavaWeb 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用jQuery Ajax实现的省、市、县三级联动功能的项目案例，详细展示了从需求分析、技术选型到具体实现的过程。项目采用Java作为后端语言，利用c3p0连接池进行数据库操作，并通过JSON格式传递数据。

一、项目介绍

1、jQueryAjax异步交互实现省、市、县三级联动

2、项目开发工具：

   (1) jdk1.8.0_92
   (2) apache-tomcat-8.5.39
   (3) mysql-5.5.45-winx64
   (4) Navicat_for_MySQL_11.0.10
   (5) IDEA-2019.3.4
   (6) jquery-1.8.3.js

3、所需jar包：

   (1) c3p0-0.9.1.2.jar
   (2) commons-dbutils-1.4.jar
   (3) fastjson-1.2.62.jar ：用于将List集合转为json
   (4) mysql-connector-java-5.1.6.jar

4、项目目录结构

在这里插入图片描述

5、数据库信息

数据自联表
在这里插入图片描述

6、项目截图(只展示部分功能截图)

在这里插入图片描述

二、源码

1、c3p0-config.xml （此配置文件直接是在src文件夹下）

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
    <!-- 我们希望在配置文件中，出现链接的参数信息 -->
    <!--	1、配置默认数据源-->
    <default-config>
        <!-- name 属性定义 链接参数的key 标签的内容 代表值-->
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql:///myschool?useUnicode=true&amp;characterEncoding=utf-8</property>
        <property name="user">root</property>
        <property name="password">root</property>
    </default-config>
    <!--	2、配置其他数据源-->
    <named-config name="petshop">
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql:///petshop</property>
        <property name="user">root</property>
        <property name="password">root</property>
    </named-config>
</c3p0-config>

2、Jsp页面

(1) index.jsp

<%--
  Created by IntelliJ IDEA.
  User: sougu
  Date: 2020/9/15
  Time: 10:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            // 初始化省
            loadArea(0, "s1");
            // 当省变化时 加载市
            $("#s1").change(function () {
                // 清空市
                $("#s2").empty();
                $("#s2").append("<option value=''>--请选择市--</option>");
                // 清空区县
                $("#s3").empty();
                $("#s3").append("<option value=''>--请选择区县--</option>");
                var code1 = $(this).val();
                loadArea(code1, "s2");
            });
            // 当市变化时 加载区县
            $("#s2").change(function () {
                // 清空区县
                $("#s3").empty();
                $("#s3").append("<option value=''>--请选择区县--</option>");
                var code1 = $(this).val();
                loadArea(code1, "s3");
            });
        });

        function loadArea(pid, sid) {
            $.post("${pageContext.request.contextPath}/AreaServlet", {"pid": pid}, function (data) {
                $(data).each(function () {
                    //console.info(this.cityName);
                    var cityname = this.name;
                    var codeid = this.id;
                    // 将城市名称和城市id组装成option
                    var $option = $("<option value='" + codeid + "'>" + cityname + "</option>");
                    // 在省的select后面追加option
                    $("#" + sid).append($option);
                });
            });
        }
    </script>
</head>
<body>
<select id="s1">
    <option value="">--请选择省--</option>
</select>
<select id="s2">
    <option value="">--请选择市--</option>
</select>
<select id="s3">
    <option value="">--请选择县--</option>
</select>
</body>
</html>

3、utils工具类

JdbcUtil.java

package com.utils;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import javax.sql.DataSource;
public class JdbcUtil {
    //创建c3p0的实例，读取src下面的配置文件中default-config里面的默认数据源
    private static DataSource ds = new ComboPooledDataSource();
    //创建c3p0的实例，读取src下面的配置文件中named-config里面的初始数据源
    //private static ComboPooledDataSource ds1 = new ComboPooledDataSource("petshop");
    //工具类提供连接池对象给dbutils QueryRunner(DataSource);
    public static DataSource getDataSources() {
        //此方法将返回上方获取的数据源
        return ds;
    }
}

4、pojo层（实体映射层）

Area.java

package com.pojo;

public class Area {
    private int id;
    private int pid;
    private String name;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "Area{" +
                "id=" + id +
                ", pid=" + pid +
                ", name='" + name + '\'' +
                '}';
    }
}

5、dao层

AreaDao.java

package com.dao;
import com.pojo.Area;
import java.util.List;
//根据查询地区
public interface AreaDao {
   public List<Area>getAreaByPid(int pid);
}

6、dao实现层

ArreaDaoImpl.java

package com.dao.impl;

import com.dao.AreaDao;
import com.pojo.Area;
import com.utils.JdbcUtil;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

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

public class ArreaDaoImpl implements AreaDao {
    @Override
    public List<Area> getAreaByPid(int pid) {
        QueryRunner queryRunner = new QueryRunner(JdbcUtil.getDataSources());
        String sql = "select * from area where pid=?";
        List<Area> areaList = null;
        try {
            areaList = queryRunner.query(sql, new BeanListHandler<Area>(Area.class), pid);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return areaList;
    }
}

7、service层（业务处理层）

AreaService.java

package com.service;
import com.pojo.Area;
import java.util.List;

public interface AreaService {
    public List<Area> getAreaByPid(int pid);
}

8、service实现层

AreaServiceImpl.java

package com.service.impl;
import com.dao.AreaDao;
import com.dao.impl.ArreaDaoImpl;
import com.pojo.Area;
import com.service.AreaService;
import java.util.List;
public class AreaServiceImpl implements AreaService {
    AreaDao areaDao = new ArreaDaoImpl();
    @Override
    public List<Area> getAreaByPid(int pid) {
        return areaDao.getAreaByPid(pid);
    }
}

9、controller(Servlet)层

AreaServlet.java

package com.controller;

import com.alibaba.fastjson.JSONObject;
import com.pojo.Area;
import com.service.AreaService;
import com.service.impl.AreaServiceImpl;

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.util.List;

@WebServlet("/AreaServlet")
public class AreaServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/json;charset=utf-8");
        //将request.getParameter("pid")获取到的String类型的id转为int类型
        int pid = Integer.parseInt(request.getParameter("pid"));
        AreaService areaService = new AreaServiceImpl();
        List<Area> list = areaService.getAreaByPid(pid);
        //将list集合转换成json
        String str = JSONObject.toJSONString(list);
        response.getWriter().println(str);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}