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){
<span> </span>//3、遍历得到属性并添加到option中
<span> </span>$.each(data,function(i,object){
<span> </span>var $option = $("<option>"+object["d_name"]+"</option>");
<span> </span>//4、将option添加到select列表中
<span> </span>$select.append($option);
<span> </span>});
//将下拉选框添加到特定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中，还能撸出其他不一样的效果，爱咋玩咋玩
1746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
