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

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

前言

为了用户在填写信息时遇到下拉列表数据和数据库不统一的问题,以解决不必要的麻烦,所以用到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>

三、最后展示

url框输入前端网页的地址

总结

以上代码可供参考,如有报错可随时提出

相关文章
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
77 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
73 1
|
1月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
75 0
|
1月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
1月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
40 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
1月前
|
数据采集 前端开发 JavaScript
Python爬虫之Ajax数据爬取基本原理#6
Ajax数据爬取原理【2月更文挑战第19天】
47 1
Python爬虫之Ajax数据爬取基本原理#6
|
1月前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
14 0
|
1月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
1月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
1月前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)