ajax同步获得数据字典的值,原 Ajax异步配合数据字典完成下拉选框

本文介绍了如何在Web项目中利用Ajax异步请求配合数据字典,实现实时动态下拉菜单,通过数据库查询生成特定内容,提升用户体验和数据维护的灵活性。作者详细展示了数据字典的概念、前后端代码实现及数据库操作,适合前端开发者参考。
摘要由CSDN通过智能技术生成

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

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

·什么是数据字典?

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

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

·实现效果

933566e2c778b696acb6304cbb0bd871.gif

·准备工作

1、数据字典(mysql)

2、前台页面代码实现(jsp)

3、后台代码实现(servlet)

1、数据字典:

e55698e5b2df621f23d79a9d1b80748a.png

2、前台代码实现:

jquery异步代码:function loadDictionary(d_id,p_id){

//1、实现下拉选框

var $select = $("----请选择----");

//2、ajax获取到json对象

$.post(

"${pageContext.request.contextPath}/findDict",

{"d_id":d_id},

function(data){

//3、遍历得到属性并添加到option中

$.each(data,function(i,object){

var $option = $(""+object["d_name"]+"");

//4、将option添加到select列表中

$select.append($option);

});

//将下拉选框添加到特定id中

$("#"+p_id).append($select);

},

"json"

);

}

方法调用代码:$(function(){

loadDictionary("001","forPlay");

loadDictionary("002","forEat");

})

jsp页作一新求抖直微圈面代码:

数据字典实现下拉选框

零食:

玩具:

后台代我自址哈这工边识框处己按后大都加控不架的码:(都写在控比抖朋要插支一圈不者地器享说几制层中了)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 list = runner.query("select * from dictionary where d_id = "+d_id, new BeanListHandler(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中,还能撸出其他不一样的效果,爱咋玩咋玩

本文来源于网络:查看 >https://blog.csdn.net/pbrlovejava/article/details/80541890

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值