Ajax异步配合数据字典完成下拉选框

在一个web项目中，往往有许多下拉选框，其中下拉选框必须含有特定的内容，而如果在jsp或者html页面中写死的话就很难修改，也不能动态获取到更新的数据，所以要使用前台Ajax+后台回调+数据库的方式去动态生成特定的下拉选框。

·什么是数据字典？

百度百科：数据字典是指对数据的数据项、数据结构、数据流、数据存储、处理逻辑、外部实体等进行定义和描述，其目的是对数据流程图中的各个元素做出详细的说明，使用数据字典为简单的建模项目。简而言之，数据字典是描述数据的信息集合，是对系统中使用的所有数据元素的定义的集合。

我的理解：在一个项目中所要用到的所有词进行规范的处理所得到的数据库表，就是数据字典。

·实现效果

·准备工作

1、数据字典（mysql）

2、前台页面代码实现（jsp）

3、后台代码实现（servlet）

1、数据字典：

2、前台代码实现：

jquery异步代码：

function loadDictionary(d_id,p_id){//1、实现下拉选框var $select = $("<select>----请选择----</select>");//2、ajax获取到json对象$.post("${pageContext.request.contextPath}/findDict", {"d_id":d_id},function(data){//3、遍历得到属性并添加到option中$.each(data,function(i,object){var $option = $("<option>"+object["d_name"]+"</option>");//4、将option添加到select列表中$select.append($option);});//将下拉选框添加到特定id中$("#"+p_id).append($select);},"json");}       //3、遍历得到属性并添加到option中$.each(data,function(i,object){var $option = $("<option>"+object["d_name"]+"</option>");//4、将option添加到select列表中$select.append($option);});//将下拉选框添加到特定id中$("#"+p_id).append($select);},"json");}

方法调用代码：

$(function(){loadDictionary("001","forPlay");loadDictionary("002","forEat");})

jsp页面代码：

<body>数据字典实现下拉选框<br>零食：<p id="forEat"></p><br>玩具：<p id="forPlay"></p>
</body>

后台代码：（都写在控制层中了）

public class FindDictServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//解决乱码response.setContentType("application/json;charset=utf-8");//获得d_idString d_id = request.getParameter("d_id");//原生sqlQueryRunner runner = new QueryRunner(JDBCUtils_V3.getDataSource());try {//获得list集合List<Dict> list = runner.query("select * from dictionary where d_id = "+d_id, new BeanListHandler<Dict>(Dict.class));//转换成json格式Gson gson = new Gson();String json = gson.toJson(list);//回调给ajaxresponse.getWriter().write(json);} catch (SQLException e) {e.printStackTrace();}}

这就最基本的ajax+数据字典完成的下拉选框，其实正常情况下还需要将id之类的附加数据添加到option中，还能撸出其他不一样的效果，爱咋玩咋玩

Ajax异步配合数据字典完成下拉选框相关推荐

好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）----个人钟爱
下拉选框如需样例和具体效果,请点击下面的连接. 好用的下拉选框(单选,多选,全选,清空和反选,及个种样式) 附件一:layui应用formselect layui.config({base: './ ...
easyExcel导出某列是固定下拉选框的excel模板
easyexcel导出固定下拉选框的模板,项目中遇到的,记录一下. 1.示例如图,第四列的值是下拉选框,是服务器端根据真实数据动态生成的. 2.实现方案 2.1 依赖 <dependency& ...
html 表格，列表，表单，select和下拉选框，textarea多行文本域，label关联控件，表单，浮动框架，结构化标签
1. 表格表格的语法 (1) table标签: 表示表格的开始和结束.表格的所有内容都需要写在这一对标签里 (2) tr标签: 表示表格中的一行 table row (3) td标签:要写在tr中, ...
Element UI中el-calendar日历的年月快捷选择（可下拉选框选择）
需求: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当月,用户可以自由点选日期实现思路:右上角年月元素隐藏掉,写一个下拉选框,通过css定位到正确位置,通过vue计算属性进行数据绑定 ...
Element UI中el-calendar日历的使用及样式修改（年月可下拉选框选择）
项目场景: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当天日期,用户可以自由点选日期,被选中后日期以紫色显示,鼠标在日历上移动时,日期显示出橙色.有数据的日期显示出灰色. 实现思路:删 ...
下拉选框样式html,超酷select选择下拉框美化jQuery插件
jquery-nice-select是一款轻量级的select下拉选择框美化jQuery插件.该插件可以将原生的select元素转换为自定义样式的下拉选择框,并且在选择时带有很酷的CSS3过渡动画效果 ...
第三十八讲：tapestry Ajax 关联下拉选框(select)组件
2019独角兽企业重金招聘Python工程师标准>>> 源码如下: AJAXSelect1.java /** * 项目名称:TapestryStart * 开发模式:Maven+Ta ...
HTML下拉选框加倒三角,CSS给选中元素增加倒三角形
需求如下: 给选中的item添加一个select样式,并且生成一个下三角形一.三角形的实现原理宽度width为0:height为0:根据三角形的朝向设置上下左右的border,只能设置其中的三个边 ...
html下拉框失去焦点事件,iview 表单验证 input 用失去焦点事件 blur， select下拉选框要用change事件验证...
Linux MySQL源码安装缺少ncurses-devel包在Red Hat Enterprise Linux Server release 5.7 上用源码安装MySQL-5.6.23时,遇到了 ...

Ajax异步配合数据字典完成下拉选框

Ajax异步配合数据字典完成下拉选框

Ajax异步配合数据字典完成下拉选框相关推荐

最新文章

热门文章