maven+Ajax+Jedis完成省市区三级联动; PS：第一次有效果，后续无效果问题解决；

最新推荐文章于 2020-10-20 20:04:13 发布

打豆豆。

最新推荐文章于 2020-10-20 20:04:13 发布

阅读量312

点赞数

分类专栏： web 文章标签：省市区三级联动

本文链接：https://blog.csdn.net/weixin_42323802/article/details/83218134

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

声明使用 JDK9，mysql8，maven3.5.4 进行测试；

碰到仅仅第一次有效的问题解决；

mysql数据库查询的数据保存到，jedis 中一份作为缓存供省市区三级联动使用；出现以上问题原因如下：

是因为在第一次时候获取数据在mysql 数据库中查询，并保存在jedis 中了一份，后续从jedis 中获取由于中间代码导致获取不到jedis中的数据；

①三级联动思路，完成从数据库中取值展示在前端页面，并且储存在jedis 中供以后访问使用；

②分析表格，自关联的一张表；使用的sql 语句，通过 pid 获取省份，城市，和区域；

省市区三级联动表格下载地址：https://download.csdn.net/download/weixin_42323802/10734803

③使用Ajax 完成前端展示；

源代码；

表格如下，数据自己填充：

CREATE TABLE `pcd` (
  `id` int(11) NOT NULL,
  `pid` int(11) DEFAULT NULL,
  `name` varchar(10) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

按照这个把依赖丢到 pom中；

jedis.properties ，下面有 jedisUtils工具类；

MaxIdle=10
maxtotal=100
maxwaitmillis=3000
host=127.0.0.1
port=6379

没有使用 jedisPool 连接池，PS：连接池配置参见其他博文；

html 前端页面, 主要使用 Ajax 获取bean 中的值，通过 jq 的 html(【显示出省份，城市，或者区域的name】) 和 attr( 设置属性，value 的值【city的 id】 ) 回显数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h2>省市区三级联动</h2>
省&nbsp;
<select onchange="changeCities(this.value)" name="province" id="province" >
    <option value="">--请选择--</option>
</select>
市&nbsp;
<select name="city" id="city" onchange="changeAreas(this.value)">
    <option value="">--请选择--</option>
</select>
区&nbsp;
<select name="area" id="area">
    <option value="">--请选择--</option>
</select>
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

    function changeAreas(pid) {
        $.ajax({
            url: "/pcdServlet",
            data: {"pid": pid},
            dataType: "json",
            success: function (res) {
                $("#area").html("<option value=\"\">--请选择--</option>");

                for(var i=0;i<res.length;i++){
                    var $option = $("<option></option>");
                    //设置属性和文本值
                    $option.attr("value",res[i].id).html(res[i].name);
                    //追加
                    $("#area").append($option);
                }
            }
        });
    }


    function changeCities(pid) {

        $.ajax({
            url: "/pcdServlet",
            data: {"pid": pid},
            dataType: "json",
            success: function (res) {
                $("#city").html("<option value=\"\">--请选择--</option>");

                for(var i=0;i<res.length;i++){
                    var $option = $("<option></option>");
                    //设置属性和文本值
                    $option.attr("value",res[i].id).html(res[i].name);
                    //追加
                    $("#city").append($option);
                }
            }
        });

    }


    $.ajax({
        url: "/pcdServlet",
        data: {"pid": 0},
        dataType: "json",
        success: function (res) {   /*  设置json格式*/
            for (var i = 0; i < res.length; i++) {
                //获取option   标签对象, 设置name，id   把数据追加在父标签后
                var $option = $("<option></option>");
                $option.html(res[i].name).attr("value", res[i].id);
                /*   设置标签的属性这个地方可能有不理解，res是json  格式传递过来的；
                      service实现类中，json = JSON.toJSONString(cityList);
                    res[i]获取   json 数组中单个元素的对象，相当于City这个bean 的对象
                    取值使用圆点符把  name  ，id   的属性取出来；
                  */
                $("#province").append($option);
            }
        }
    });


</script>
</body>
</html>

bean不多说；PcdServlet 如下；

package servlet;
import service.PcdService;
import serviceImpl.PcdServiceImpl;
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;
@WebServlet(name = "PcdServlet", urlPatterns = "/pcdServlet")
public class PcdServlet extends HttpServlet {
    private  static PcdService pcdService =  new PcdServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
    /**
     * 下载城市信息
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /* 获取传递过来的city 的name   以json格式响应给浏览器  */
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        //  pid=0  代表是省份，自关联的一张表
        int pid = Integer.parseInt(req.getParameter("pid"));
        String json=pcdService.loadCityDataByPid(pid);
        resp.getWriter().write(json);
    }
    }

Service 如下；

package service;
public interface PcdService {
    String loadCityDataByPid(int pid);
}

ServiceImpl 如下；

package serviceImpl;
import bean.City;
import com.alibaba.fastjson.JSON;
import dao.PcdDao;
import daoImpl.PcdDaoImpl;
import redis.clients.jedis.Jedis;
import service.PcdService;
import utils.JedisUtils;
import java.util.HashMap;
import java.util.List;
/**
 * @auther SyntacticSugar
 * @data 2018/10/19 0019下午 3:17
 */
public class PcdServiceImpl implements PcdService {
    private static PcdDao pcdDao = new PcdDaoImpl();
    /**
     * 根据pid  来查询province  的数据，封装成json
     * 首先从redis 中查询，如查不到就在数据库中查询并封装一份数据到redis中
     * @param pid
     * @return
     */
    @Override
    public String loadCityDataByPid(int pid) {
        Jedis jedis = JedisUtils.getJedis();
        String json = jedis.get("cityData"+pid);
        //该处出现bug一次
        if (json == null) {
            List<City> cityList = pcdDao.selectPcdByPid(pid);
            json = JSON.toJSONString(cityList);
            jedis.set("cityData"+pid, json);
            System.out.println(json);
        }else{
            System.out.println("json  "+json);
        }
        return json;
    }
}

dao 如下；

package dao;
import bean.City;
import java.util.List;
public interface PcdDao {
    List<City> selectPcdByPid(int pid);
}

DaoImpl 如下；

package daoImpl;
import bean.City;
import dao.PcdDao;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import utils.JdbcUtils;
import java.util.List;
/**
 * @auther SyntacticSugar
 * @data 2018/10/19 0019下午 3:49
 */
public class PcdDaoImpl implements PcdDao {
private  static JdbcTemplate jdbcTemplate= JdbcUtils.getJdbcTemplate();
    /**
     *    根据  pid   来查询城市信息
     * @param pid
     * @return
     */
    @Override
    public List<City> selectPcdByPid(int pid) {
        String sql="select  * from pcd  WHERE  pid=? ";
        List<City> cityList = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(City.class), pid);
        return cityList;
    }
}

工具类如下，jdbcUtils直接获取的 jdbcTemplate ,所以工具类封装的比较简洁；

package utils;
//import com.alibaba.druid.pool.DruidDataSourceFactory;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import org.springframework.jdbc.core.JdbcTemplate;
import javax.sql.DataSource;
import java.io.FileReader;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Properties;
/**
 * @auther SyntacticSugar
 * @data 2018/9/29 0029下午 10:22
 */
public class JdbcUtils {
    private static JdbcTemplate template;
    private static Connection conn;
    private static PreparedStatement statement;
    private static ResultSet res;
    /**
     * 获取 template
     */
    public static JdbcTemplate getJdbcTemplate() {
        try {  //druid
//            FileInputStream fis = new FileInputStream(JdbcUtils.class.getResource("/").getPath() + "druid.properties");
//			Properties p = new Properties();
//			p.load(fis);
//            DataSource dataSource = DruidDataSourceFactory.createDataSource(p);

            //c3p0   连接数据库，获取jdbcTemplate
            ComboPooledDataSource dataSource = new ComboPooledDataSource();
            template = new JdbcTemplate(dataSource);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return template;
    }

    /**
     * 释放资源
     * @param res
     * @param statement
     * @param conn
     */
    public static void release(ResultSet res, PreparedStatement statement, Connection conn) {
        try {
            if (res != null) {
                res.close();
            }
            if (statement != null) {
                statement.close();
            }
            if (conn != null) {
                conn.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    //提供一个main  用于测试是否连接上数据库,org.springframework.jdbc.core.JdbcTemplate@66d3eec0成功
    public static void main(String[] args) {
        System.out.println(getJdbcTemplate());
    }
}

c3p0.xml 配置，不贴了；jedis工具类；

package utils;
import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisPool;
import redis.clients.jedis.JedisPoolConfig;
import java.util.ResourceBundle;
/**
 * @auther SyntacticSugar
 * @data 2018/10/18 0018下午 9:13
 *
 * jedisPool   的使用
 */
public class JedisUtils {
    private static Jedis jedis=null;
    private static JedisPool jedisPool =null;
    static {
        ResourceBundle rb = ResourceBundle.getBundle("jedis");
        int maxIdle = Integer.parseInt(rb.getString("MaxIdle"));
        int maxtotal = Integer.parseInt(rb.getString("maxtotal"));
        int maxwaitmillis = Integer.parseInt(rb.getString("maxwaitmillis"));
        String host = rb.getString("host");
        int port = Integer.parseInt(rb.getString("port"));
        //创建连接池
        JedisPoolConfig config = new JedisPoolConfig();
        config.setMaxIdle(maxIdle);
        config.setMaxTotal(maxtotal);
        config.setMaxWaitMillis(maxwaitmillis);
         jedisPool = new JedisPool(config, host, port);
    }

    /**
     * 获取jedisPool   的resource
     * @return
     */
    public static Jedis getJedis() {
        return  jedisPool.getResource();
    }
    /**
     * 关闭jedis 的资源
     * @param jedis
     */
    public static void closeJedis(Jedis jedis) {
        if (jedis!=null) {
            jedis.close();
        }
    }
    public static void main(String[] args) {
        Jedis jedis = JedisUtils.getJedis();
        jedis.set("test", "通过工具类创建");
        String test = jedis.get("test");
        System.out.println(test);
        jedis.close();
    }
}

效果如下：

打豆豆。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
maven+Ajax+Jedis完成省市区三级联动; PS：第一次有效果，后续无效果问题解决；

声明使用 JDK9，mysql8，maven3.5.4 进行测试；碰到仅仅第一次有效的问题解决；mysql数据库查询的数据保存到，jedis 中一份作为缓存供省市区三级联动使用；出现以上问题原因如下：是因为在第一次时候获取数据在mysql 数据库中查询，并保存在jedis 中了一份，后续从jedis 中获取由于中间代码导致获取不到jedis中的数据；①三级联动思路，完...
复制链接

扫一扫