原生ajax二级联动_二进制联动-CSDN博客

本文链接：https://blog.csdn.net/suncheng_hong/article/details/2502231

    项目中要用到水域和断面的二级联动，每条水域有多个断面。思路就是导入页面时先查出水域，然后再从下拉列表中选择水域时，根据水域查出断面，加载到第二个下拉列表中。
    先是页面上调用方法valley()，得到所用的水域。页面代码如下：

 
 <%
  CityDayDao cdd = new CityDayDaoImpl();
  List valleys = cdd.valley();
  request.setAttribute("valleys",valleys);
%>
 

cdd.valley()方法是dao里取得所有水域的方法，代码如下：

 
   public List valley() {
  Session  session = HibernateSessionFactory.getSession();
  Connection conn = session.connection();
  Statement stmt = null;
  ResultSet rs = null;
  List valleys = new ArrayList();
  try{
     stmt = conn.createStatement();
     StringBuffer sb = new StringBuffer();
     sb.append("select distinct t.valley valley from qgwaterenv_code t");
     rs = stmt.executeQuery(sb.toString()); 
     while(rs.next()){
      valleys.add(rs.getString("valley"));
     }
     return valleys;
  }catch(SQLException e){
   e.printStackTrace();
  }finally{
   if (session != null) {
    session.close();
   }
  }
  return null;
 }
 
 

现在水域查出来了．jsp中用jstl标签遍历这些水域。

 
      水域:   
    <select id = "valley" onchange="queryType(this);">
      <option value="0">请选择</option>
      <c:forEach var="valley" items="${valleys}">
         <option value="${valley }">${valley}</option>
      </c:forEach>    
    </select>
 
 

当点击水域时击发 queryType方法：

 
  function queryType(){
 var valley = document.getElementById('valley').value;
 if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }else{
  xmlHttp = new XMLHttpRequest();
 }
 var url2 = '/typeInfoAction.do?valley='+valley;
 xmlHttp.open("GET",url2,true);
 xmlHttp.onreadystatechange = typeinfo;
 xmlHttp.send(null);
}
 
 

typeInfoAction.do是根据水域查断面的action，代码如下：

 
   public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {
  try {
   request.setCharacterEncoding("gbk");
  } catch (UnsupportedEncodingException e1) {
   // TODO Auto-generated catch block
   e1.printStackTrace();
  }
  String valley = request.getParameter("valley");
  CityDayDao cdd = new CityDayDaoImpl();
  List<String> waterPlaces = cdd.waterPlaceByvalley(valley);
  StringBuffer content = new StringBuffer();
  for (String obj : waterPlaces) {
   content.append(obj).append(",");
  }
  PrintWriter out;
  try {
   out = response.getWriter();
   out.print(content);
   out.flush();
   out.close();
   System.out.println("script==" + content);
  } catch (IOException e) {
   e.printStackTrace();
  }
  return null;
 }
 
 

waterPlaceByvalley的waterPlaceByvalley方法：

 
   public List waterPlaceByvalley(String valley) {
  Session  session = HibernateSessionFactory.getSession();
  Connection conn = session.connection();
  PreparedStatement stmt = null;
  ResultSet rs = null;
  List waterPlaces = new ArrayList();
  try{
    StringBuffer sb = new StringBuffer();
    sb.append("select t.waterplace from qgwaterenv_code t where t.valley=?");
    stmt = conn.prepareStatement(sb.toString());
    stmt.setString(1, valley);
    rs = stmt.executeQuery();
    while(rs.next()){
     waterPlaces.add(rs.getString("waterplace"));
    }
    return waterPlaces;
  }catch(SQLException e){
   e.printStackTrace();
  }finally{
   if (session != null) {
    session.close();
   }
  }
  return null;
 }
 
 

查出结果后返回给ajax回调函数．

 
  function typeinfo(){
 if(xmlHttp.readyState==4){
  if(xmlHttp.status==200){
   var res = xmlHttp.responseText;
   var items = res.split(',');
   var waterPlaces = document.getElementById('waterplace');
   var length2=waterPlaces.options.length;
  　　 for(var j=0;j<length2;j++){
  　  　 waterPlaces.options.remove(j);
  　　 }
   for(var i=0;i<items.length-1;i++){
    var option = new Option(items[i],items[i]);
    waterPlaces.add(option);
   }
  }
 }
}
 
 

'waterplace'是jsp中用来存放断面的下拉框。

 
      断面:
    <select id = "waterplace" name="waterplace">
       <option value="0">请选择</option>
    </select>

至此完毕。感觉这样的做法缺乏通用性，有机会写一个通用点的。望大家给点意见。