ajax+jquery+数据库 动态二级下拉框联动+栏位索引范围

原创 2018年04月16日 23:16:07
数据库建school(学院表),major(专业表)

用于获取的两个bean

package SearchStu.beans;

public class School {
 private String sid;
 public String getSid() {
    return sid;
}
public void setSid(String sid) {
    this.sid = sid;
}
public String getYname() {
    return yname;
}
public void setYname(String yname) {
    this.yname = yname;
}
private String yname;

}
-------------------------------------------------------------
package SearchStu.beans;

public class Major {
 public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getMname() {
        return mname;
    }
    public void setMname(String mname) {
        this.mname = mname;
    }
    public String getSchool_sid() {
        return school_sid;
    }
    public void setSchool_sid(String school_sid) {
        this.school_sid = school_sid;
    }
private String id;
 private String mname;
 private String school_sid;
 
}


用于操作数据库的两个dao

先school

public List<School> getAllSchools() {
        List<School> list = null;
        Connection conn = getDBConnection();
        String sql = new String("SELECT sid,yname FROM school");
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            ResultSet rs = ps.executeQuery();
            list = new ArrayList<School>();
            while (rs.next()) {
                School s = new School();
                s.setSid(rs.getString(1));
                s.setYname(rs.getString(2));
                
                list.add(s);
            }
            rs.close();
            ps.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        closeConnection(conn);
        return list;
    }

    private Connection getDBConnection() {
        Connection conn = null;
        try {
            Class.forName("org.postgresql.Driver");
            String url = "jdbc:postgresql://localhost:5432/jspdb";
            conn = DriverManager.getConnection(url, "postgres", "199431@JB");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }

    private void closeConnection(Connection conn) {
        try {
            if (conn != null)
                conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

}



(个人建议先在下拉框中把学院的名称获取出来,所以做完这一步可以跳到school的servlet

然后major


public class MajorDao {
    public List<Major> getAllMajors(String name) {
        List<Major> list = null;
        Connection conn = getDBConnection();
        
         String sql = "select m.mname from major m,"  
                 + "school s where m.school_sid = "  
                 + " (select sid from school where yname ='"+name+"')"
                 + " and m.school_sid = s.sid";  

        
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            //ps.setString(1,name);
             System.out.println(sql);  
            ResultSet rs = ps.executeQuery();
            list = new ArrayList<Major>();
            while (rs.next()) {
                Major s = new Major();
        

                s.setMname(rs.getString(1));

//一定要注意这里啊!!之前报错总是显示栏位索引值比栏位数多,在网上查的说法是与参数name前后的单引号有关但是我删掉引号会显示数据库会显示字段不存在(当然会不存在啦但是我打死都不信还是尝试了一下),

结果发现是我  s.setMname(rs.getString(1));里的1写成了2,也就是说明明只查的出数据库里的一条字段,但你偏要人家获取的是第二条,一个根本就不存在的字段,故出错。。。

            
                
                list.add(s);
                 System.out.println(s);  
            }
            rs.close();
            ps.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        closeConnection(conn);
        return list;
    }

    private Connection getDBConnection() {
        Connection conn = null;
        try {
            Class.forName("org.postgresql.Driver");
            String url = "jdbc:postgresql://localhost:5432/jspdb";
            conn = DriverManager.getConnection(url, "postgres", "199431@JB");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }

    private void closeConnection(Connection conn) {
        try {
            if (conn != null)
                conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

}

用于请求响应的servlet

school

public class ListSchool extends HttpServlet {
    private static final long serialVersionUID = 1L;
   
    public ListSchool() {
        super();
       
    }

    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
        SchoolDao sdao = new SchoolDao();
        List<School> list = sdao.getAllSchools();  
        ObjectMapper om = new ObjectMapper();
        response.getWriter().print(om.writeValueAsString(list));
    }

    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        doGet(request, response);
    }

}


检查school是否在下拉框获取成功。建jsp




成功则显示为:


接下来做major

public class ListMajor extends HttpServlet {
    private static final long serialVersionUID = 1L;
   
    public ListMajor() {
        super();
      
    }

    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         request.setCharacterEncoding("utf-8");  
            response.setContentType("text/html;charset=utf-8");
         
         
            MajorDao mdao = new MajorDao();
            String yName = request.getParameter("yxname");
            List<Major> list = mdao.getAllMajors(yName);  
            System.out.println(yName);//检测参数是否传成功
        ObjectMapper om = new ObjectMapper();
            response.getWriter().print(om.writeValueAsString(list));

    }

    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        doGet(request, response);
    }

}


ok,后台都做完了,现在是前端


记得在change函数结束后加上    document.getElementById("mname").innerHTML="";     });

表示清空之前下拉框记录

否则就会


<html>



注意两个函数放置的位置如果将bulidYnameSelect放在change之后,change函数是根本没有办法被调用的,所以seled参数没有办法传到ListMajor(这个地方也花了我超久去找bug一度以为我jQuery链接失效导致change函数根本没有调用)

结果:




动态二级下拉框联动(二级数据从数据库中获取)

要实现的效果如下图:左边的一级下拉框选择改变的话,右边的二级下拉框的内容也会改变...
  • chenjing928
  • chenjing928
  • 2017-06-07 21:11:04
  • 4590

jsp+javascript实现动态下拉二级联动(select+option)

最近在做一个项目,要使用动态下拉二级联动效果。就是当改变新闻大类别后,相应的小类别也要调整。数据库我设置了三个字段(id,name,parentId),因为只做二层目录,所以第一层目录的父节点(par...
  • Lixuanshengchao
  • Lixuanshengchao
  • 2016-06-07 00:10:04
  • 6288

实现jsp页面二级下拉框联动,实时读取数据库数据

  • 2009年12月31日 12:33
  • 2KB
  • 下载

在一个jsp页面实现二级下拉框联动,实时读取数据库数据

在一个jsp页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用。设计的文件,serch.jsp,main.js,bytetostr.js,先讲一下main.j...
  • jiqimiao
  • jiqimiao
  • 2007-04-26 12:09:00
  • 3634

使用Ajax和Jquery配合数据库实现下拉框的二级联动

首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city :          城市表 如图: 然后再在java中建立相关的实体类与之对应 ...
  • Evan_QB
  • Evan_QB
  • 2017-07-19 19:09:09
  • 10869

jQuery简易实现动态读取数据库的二级下拉框

本文介绍的是从数据库读取数据动态绑定的二级下拉框
  • moon_cup
  • moon_cup
  • 2016-06-28 10:49:17
  • 2083

org.postgresql.util.PSQLException: 栏位索引超过许可范围:1,栏位数:0。

如果你的SQL语句在数据库中查询的时候是没问题的,但是把他写到代码中的时候如果报org.postgresql.util.PSQLException: 栏位索引超过许可范围:1,栏位数:0。这个错误...
  • weixin_38306434
  • weixin_38306434
  • 2017-12-19 13:54:03
  • 280

完美解决动态二级下拉菜单联动问题

现在是一个静态的演示来说明实现的原理:  var totalCount=12;  //定义数据总数,包括1级2级    //数据结构,是个数组的数组,可以使用开发语言动态产生  d...
  • my98800
  • my98800
  • 2016-04-07 08:12:23
  • 1789

利用ajax实现二级联动下拉框

下拉框二级联动,用ajax来实现是已经非常成熟的技术了。但对于我这个java菜鸟来说,真的是费了九牛二虎之力,各种百度,各种测试。终于得以实现。代码相对于网上的容易理解些。现把代码和我在编写的过程中遇...
  • qq_35778289
  • qq_35778289
  • 2016-08-04 15:19:40
  • 1405

InfoPath与SharePoint之(三) 在InfoPath中实现联动下拉菜单

在InfoPath中实现联动的下拉菜单是一种比较常见的需求。这里通过演示如何选择省份和城市,讲解一下如何实现联动下拉菜单。...
  • SPFarm
  • SPFarm
  • 2015-02-13 11:36:49
  • 2183
收藏助手
不良信息举报
您举报文章:ajax+jquery+数据库 动态二级下拉框联动+栏位索引范围
举报原因:
原因补充:

(最多只允许输入30个字)