通过ajax调用数据字典数据动态添加到网页下拉列表

最新推荐文章于 2023-12-12 15:33:57 发布

爱敲代码的小林

最新推荐文章于 2023-12-12 15:33:57 发布

阅读量277

点赞数 3

文章标签： ajax 数据库 java

本文链接：https://blog.csdn.net/zky__sch/article/details/131307211

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

为了用户在填写信息时遇到下拉列表数据和数据库不统一的问题，以解决不必要的麻烦，所以用到ajax获取后台查询的数据库数据展示到页面上

一、数据字典创建

数据字典主要做的是表的查询一般不做增删改；数据字典一般是一个项目中不经常改变或者数据是其他数据表经常用到的数据提取出来做成一个数据的集合放到一个表中

二、准备工作

1.数据字典

2.后端代码

表结构：

2.1数据库实体类

package com.shuju.bean;

import java.io.Serializable;

public class Shuju implements Serializable {
    private int id;
    private int parentId;
    private String name;

    public int getId() {
        return id;
    }

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

    public int getParentId() {
        return parentId;
    }

    public void setParentId(int parentId) {
        this.parentId = parentId;
    }

    public String getName() {
        return name;
    }

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

2.2数据库控制层

第一步下载工具类BaseDao，文章顶部展示展示的有

第二步

创建数据字典实现类实现Dao层接口

继承BaseDao工具类实现数据字典接口

package com.shuju.dao.impl;

import com.shuju.bean.Shuju;
import com.shuju.dao.BaseDao;
import com.shuju.dao.ShujuDao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class ShujuDaoImpl extends BaseDao implements ShujuDao {
    @Override
    public List<Shuju> getShujuList(int parentId) {
        Connection conn=null;
        PreparedStatement pstmt=null;
        ResultSet rs=null;
        List<Shuju> list=new ArrayList<>();
        try{
            conn=this.getConnection();//父类的BaseDao类连接数据库方法
            String sql="SELECT id,parent_id,name FROM `shuju` where parent_id=? ";
            pstmt=conn.prepareStatement(sql);
            pstmt.setInt(1,parentId);
            rs=pstmt.executeQuery();
            while (rs.next()){
                Shuju shuju=new Shuju();
                shuju.setId(rs.getInt(1));
                shuju.setParentId(rs.getInt(2));
                shuju.setName(rs.getString(3));
                list.add(shuju);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            this.closeAll(conn,pstmt,rs);//父类的BaseDao类关闭方法
        }
        return list;
    }
}

2.3业务逻辑层

创建数据字典业务逻辑层实现类类实现service层接口

调用Dao层方法

package com.shuju.service.impl;

import com.shuju.bean.Shuju;
import com.shuju.dao.ShujuDao;
import com.shuju.dao.impl.ShujuDaoImpl;
import com.shuju.service.ShujuService;

import java.util.List;

public class ShujuServiceImpl implements ShujuService {
    private ShujuDao shujuDao=new ShujuDaoImpl();
    @Override
    public List<Shuju> getShujuList(int parentId) {
        return shujuDao.getShujuList(parentId);
    }
}

2.4Servlet层

获取前端用户输入

调用业务逻辑层代码

跳转页面

package com.shuju.servlet;

import com.alibaba.fastjson.JSON;
import com.shuju.bean.Shuju;
import com.shuju.service.ShujuService;
import com.shuju.service.impl.ShujuServiceImpl;

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.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet("/shujuServlet")
public class ShujuServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);//doGet里面调用doPost
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");//请求的中文乱码问题
        resp.setCharacterEncoding("UTF-8");//响应的中文乱码问题
        String opr = req.getParameter("opr");//选择调用的servlet中的那个方法
        ShujuService shujuService=new ShujuServiceImpl();//创建业务逻辑层对象
        if ("list".equals(opr)){
            List<Shuju> sexlist=shujuService.getShujuList(1001);
            List<Shuju> minzulist=shujuService.getShujuList(1005);
            Map<String,Object> data = new HashMap<>();
            data.put("sexlist",sexlist);
            data.put("minzulist",minzulist);
            Map<String,Object> result = new HashMap<>();
            result.put("code",0);
            result.put("data",data);
            result.put("msg","成功调用");
            String resultStr = JSON.toJSONString(result);//阿里巴巴的转json的工具
            PrintWriter pw = resp.getWriter();
            pw.write(resultStr);//设置要返回的内容
            pw.close();
        }
    }
}

2.前端代码

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

<form>
    性别：<select id="Sexselect">
    </select>
</form>
</body>
<script src="js/jquery.js"></script><!--引用jquery-->
<script>
    $.ajax({
        url:"shujuServlet?opr=list",
        type:"post",
        data:{
        },
        dataType:"json",
        success:function (data){
            var Sexselect=document.getElementById("Sexselect");
            Sexselect.innerHTML="<option value='0'>请选择</option>";<!--给初始值-->
            for (var i=0;i<data.data.sexlist.length;i++){
                var shujulist=data.data.sexlist[i];
                var option=document.createElement("option");
                option.setAttribute("value",shujulist.id);<!--后端可获取的值-->
                option.setAttribute("name","projectId");<!--后端调用的名字-->
                option.innerHTML=shujulist.name;<!--列表里显示的值-->
                Sexselect.appendChild(option);
            }
        }
    })
</script>
</html>