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"
		);
	}

方法调用代码：

$(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_id
		String d_id = request.getParameter("d_id");
		//原生sql
		QueryRunner 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);
		//回调给ajax
		response.getWriter().write(json);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

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

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

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

猜你喜欢