下拉列表的自动添加案例（使用Ajax + JSON + Redis）

最新推荐文章于 2024-03-28 05:58:26 发布

原创最新推荐文章于 2024-03-28 05:58:26 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax+json+redis

java-web 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用Ajax、JSON和Redis技术实现网页下拉列表自动填充的方法。通过Ajax请求，结合JSON数据格式和Redis缓存，有效减少服务器负载，提升用户体验。文章详细讲解了从前端页面设计到后端数据处理的完整流程。

下拉列表的自动添加（使用Ajax + JSON + Redis）

需求：
1. 提供index.html页面，页面中有一个省份的下拉列表
2. 当页面加载完成后发送ajax请求，加载所有省份

分析

本次案例使用三层架构的结构来完成
web层的前端页面可以只编写一个预先的选择器；页面加载完成后，向web层的servlet发送Ajax请求，获取到json类型的数据；然后可以使用JQuery中的append()方法，向该选择器中添加选项；选项中的数据是从servlet获取的json类型数据
web层中的servlet查询的是数据库中的省份信息
由于省份信息基本不发生改变，所以可以使用Redis缓存来减小服务器的开销

本次案例的结构流程如图所示

本次案例的工程结构如图所示

本次案例的工程结构

前端主要代码为

    <script>
        $(function () {
            // 页面加载完毕就向servlet发送Ajax请求
            $.get("provinceServlet",{},function (data) {
                // 接收servlet返回的json型数据，是个数组
                // alert(data);
                var province = $(data);
                // 遍历json数组
                province.each(function () {
                    // 向选择器中添加<option>
                    var opt = "<option name='"+this.id+"'>"+this.name+"</option>";
                    $("select").append(opt);
                });
            });
        });
    </script>

web层Servlet主要代码

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.调用service层的方法查询数据库
        ProvinceService service = new ProvinceServiceImpl();
        String province_json = service.findProvince();

        System.out.println(province_json);

        // 2.将json型的数据返回给客户端
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(province_json);

    }

Service层主要代码；本层使用redis缓存

    // 声明dao层对象
    private ProvinceDao dao = new ProvinceDaoImpl();

    // 声明redis连接
    Jedis jedis = JedisPoolUtils.getJedis();

    /**
     * 调用dao层查询数据库，得到list集合
     * 将list集合转换为json型的数据
     *
     * 使用redis缓存
     *
     * @return
     */
    @Override
    public String findProvince() {

        // 使用redis缓存
        // 判断redis服务器中是否存在该json数据
        String province_json = jedis.get("province");
        if(province_json == null || province_json.length() == 0){
            // 若redis服务器中没有该数据
            System.out.println("redis服务器中没有该数据，正在查询数据库...");
            // 调用dao层查询province表，得到list集合
            List<Province> list = dao.findProvince();

            // 将list集合转换为json型数据
            ObjectMapper mapper = new ObjectMapper();
            try {
                province_json = mapper.writeValueAsString(list);
            } catch (JsonProcessingException e) {
                e.printStackTrace();
            }

            // 将json型数据存入redis服务器
            jedis.set("province",province_json);
//            System.out.println(province_json);

            // 归还连接
            jedis.close();
        }else{
            // 若redis服务器中有该数据
            System.out.println("redis服务器中有该数据，正在查询缓存...");
        }

        return province_json;
    }

dao层操作数据库代码

    // 声明JdbcTemplate对象，建立数据库的连接
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    /**
     * 查询数据库中province表；将表中内容返回到List集合中
     * @return
     */
    @Override
    public List<Province> findProvince() {

        // 定义sql语句
        String sql = "select * from province ";

        // 使用连接template的方法执行该sql语句
        List<Province> list = template.query(sql, new BeanPropertyRowMapper<Province>(Province.class));

        return list;
    }