二级联动,数据库查询,动态写入

这篇博客介绍了如何在三层架构项目中,通过数据库查询实现二级联动效果。数据访问层处理数据库交互,业务逻辑层处理数据,页面显示部分利用JavaScript动态加载子栏目。博客详细展示了数据查询的SQL语句和JavaScript代码,用于根据父栏目选择动态更新子栏目列表。
摘要由CSDN通过智能技术生成


  本项目使用三层架构,数据访问层进行访问数据库,业务逻辑层处理数据,页面显示,父栏目直接由数据库查询循环显示,子栏目写入Js 数组,通过改变父栏目而动态改变子栏目。


//Dao类数据访问层代码



 public Map<Integer, List<Type>> getTypeMap(int uid,int status){
  //首先定义Map和list集合
  Map<Integer, List<Type>> map = new HashMap<Integer, List<Type>>();
  List<Type> list = new ArrayList<Type>();
  Type type1 = null;
  //定义父栏目为0
  int  pid = 0;
  String sql = "";
  String sqll = "";
  try {
   super.getCon();
   if(status == 1){
     sql = "select * from t_type where pid = 0";
   
   }else{
     sql = "select * from t_type where id in (select pid from t_type where id in (select tId from t_userType where uid ="+uid+"))and pid = 0"; //查询所有为0的栏目信息
   
   }
   pstmt = con.prepareStatement(sql);
   rs = pstmt.executeQuery();
   while(rs.next()){
    type1= new Type();
    type1.setId(rs.getInt("id"));
    type1.setType(rs.getString("type"));
    type1.setDetail(rs.getString("detail"));
    type1.setPid(rs.getInt("pid"));
    list.add(type1); //将查询到的信息存入list中
    map.put(0, list); //将list添加到map集合中
   }
   //循环所有为0的信息
   for (int i = 0; i < list.size(); i++) {
    List<Type> list1 = new ArrayList<Type>();
    pid = ((Type)list.get(i)).getId();
    if(status == 1){
     sqll = "select * from t_type where pid = "+pid;
    }
    else{
     sqll = "select * from t_type where id in (select tid from t_userType where uid = "+uid+") and pid != 0";
    }
   
    pstmt = con.prepareStatement(sqll);
    rs = pstmt.executeQuery();
    while(rs.next()){
  

下拉框二级联动数据库的实现需要前端和后端的配合,前端需要通过JavaScript监听第一个下拉框的变化事件,然后向后端发送Ajax请求获取第二个下拉框的数据。后端需要提供两个接口,一个用于获取第一个下拉框的数据,另一个用于根据第一个下拉框的选择值获取第二个下拉框的数据。 以下是一个简单的实现思路: 1.前端代码: ```html <!-- 第一个下拉框 --> <select id="building"> <option value="">请选择公寓</option> <!-- 动态选项 --> </select> <!-- 第二个下拉框 --> <select id="dormitory"> <option value="">请选择宿舍</option> <!-- 动态选项 --> </select> <script> // 监听第一个下拉框的变化事件 document.getElementById('building').addEventListener('change', function() { // 获取选择的值 var buildingId = this.value; // 发送Ajax请求获取第二个下拉框的数据 var xhr = new XMLHttpRequest(); xhr.open('GET', '/findAllDormitory?buildingId=' + buildingId); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 解析返回的数据 var dormitories = JSON.parse(xhr.responseText); // 清空第二个下拉框的选项 var dormitorySelect = document.getElementById('dormitory'); dormitorySelect.innerHTML = '<option value="">请选择宿舍</option>'; // 动态选项 dormitories.forEach(function(dormitory) { var option = document.createElement('option'); option.value = dormitory.dormitoryId; option.textContent = dormitory.dormitoryName; dormitorySelect.appendChild(option); }); } }; xhr.send(); }); </script> ``` 2.后端代码: ```python # 定义两个接口 @app.route('/findAllBuilding') def find_all_building(): # 查询公寓表获取数据 buildings = Building.query.all() # 将数据转换为字典列表 building_list = [{'buildingId': building.buildingId, 'buildingName': building.buildingName} for building in buildings] # 返回数据 return jsonify(building_list) @app.route('/findAllDormitory') def find_all_dormitory(): # 获取一级下拉框的选择值 building_id = request.args.get('buildingId') # 根据选择值查询宿舍表获取数据 dormitories = Dormitory.query.filter_by(buildingId=building_id).all() # 将数据转换为字典列表 dormitory_list = [{'dormitoryId': dormitory.dormitoryId, 'dormitoryName': dormitory.dormitoryName} for dormitory in dormitories] # 返回数据 return jsonify(dormitory_list) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值