三级联动通过AJAX 将后台的数据返回在页面上。主要是下拉框的联动。

最新推荐文章于 2019-09-18 15:29:30 发布

weixin_33701564

最新推荐文章于 2019-09-18 15:29:30 发布

阅读量494

点赞数

文章标签：前端后端 python ViewUI

原文链接：https://my.oschina.net/ren2881971/blog/87029

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!-- lang: js -->
//根据浏览器的类型创建xmlHttpRequest对象
function createXmlHttpRequest(){
  if(window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if(window.XMLHttpRequest()){
    return new XMLHttpRequest();
  }
}
var xmlHttpRequest;
//异步响应函数
function search(para1,para2){
  var url="/projectNameQuery.jsp?depid="+para1+"&projectType="+para2;
  xmlHttpRequest=createXmlHttpRequest();
  xmlHttpRequest.onreadystatechange=callback;
  xmlHttpRequest.open("GET",url,true);
  xmlHttpRequest.send(null);

}
//回调函数
function callback(){
  var projectName=document.getElementById("projectname");
  //请求被成功响应，已经接收到结果
  if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
    var myJson = eval("(" + xmlHttpRequest.responseText + ")");
    projectName.length=0;
    projectName.options.add(new Option("请选择事项名称", "-1"));
    for (i = 0; i < myJson.length; i ++) {
      projectName.options.add(new Option(myJson[i].name, myJson[i].keyid));
    }
  } else {
    projectName.length = 0;
    projectName.options.add(new Option("请等待...","-1"));
  }
}
function projectLoad(){
  var url="/projectNameQuery.jsp?depid=-1&projectType=-1";
  xmlHttpRequest=createXmlHttpRequest();
  xmlHttpRequest.onreadystatechange=callback;
  xmlHttpRequest.open("GET",url,true);
  xmlHttpRequest.send(null);
}
//下拉框改变事件
function changeSelect(){
  var zxdep=document.getElementById("zxdep");
  var projectType=document.getElementById("projecttype");
  var projectName=document.getElementById("projectname");
  projectName.length=0;
  if(zxdep.value==-1&&projectType.value==-1){
    projectName.options.add(new Option("请选择事项名称","-1"));
  }
  else{
    search(zxdep.value,projectType.value);
  }
}

      <td colspan="2"  height="30" align="left">
        &nbsp
        咨询部门：<select name="zxdep" id="zxdep" style="width:150px" onchange="changeSelect()" >
              <option value="-1">请选择部门</option>
          <%if(depResult!=null){%>
            <%for(int i=0,count=depResult.length;i<count;i++){%>
              <option value="<%=depResult[i][0]%>"><%=depResult[i][1]%></option>
            <%}%>
          <%}%>
        </select>
        事项类型：
        <select name="projecttype" id="projecttype" style="width:120px" onchange="changeSelect()">
          <option value="-1" selected="true">请选择事项类型</option>
          <option value="XK" >行政许可</option>
          <option value="sp">非行政许可</option>
          <option value="ZS">行政征收</option>
          <option value="QR">行政确认</option>
          <option value="DL">代理类</option>
          <option value="CF">行政处罚</option>
          <option value="FW">便民服务</option>
          <option value="QT">其他类</option>
        </select>
      事项名称：
      <select name="projectname" style="width:180px"  id="projectname" >
        <option  value="-1">请选择事项名称</option>
      </select>
      </td>
        </tr>
      <tr>

      <td width="10%"align="left">
        &nbsp
        咨询主题：<input type="text" id="zxzt" name="zxzt" size="40">
      <input type="submit" id="search" value="查询" class="btn" />
      <input type="button" id="add" value="我要咨询" class="btn" onclick="javascript:window.location.href='zxzx.jsp'"/>
      </td>
    </tr>

</body>

<!-- lang: java -->
<%@ page language="java" pageEncoding="GBK"%>
<%@ include file="/WEB-INF/include/getOatDBBean.jsp"%>
<%
  String depId = request.getParameter("depid");
  //String depId="2c90808e2aefd7cf012af40289830069";
  String projectType = request.getParameter("projectType");
  String whereSQL = "where 1=1";
  String[][] result = null;
  if(depId != null && projectType != null && !"-1".equals(depId) && !"-1".equals(projectType)){
    whereSQL += " and t.xmlx='"+projectType+"'and t.department_id='"+depId+"' ";
  }
  if(depId!=null&&projectType!=null&&!"-1".equals(depId)){
    whereSQL += " and t.department_id='"+depId+"' ";
  }
  if(depId!=null&&projectType!=null&&!"-1".equals(projectType)){
    whereSQL += " and t.xmlx='"+projectType+"'";
  }
  String sql = "select t.keyid,t.name from projectinfo t "+whereSQL;
  String callback = "[";
  try{

    result = otaDbbean.getManyRows_ManyColumns(sql);
    for(int i=0; i<result.length; i++){
      callback += "{keyid:'" + result[i][0] + "',name:'" + result[i][1] + "'},";
    }
    callback = callback.substring(0,callback.length()-1) + "]";
    response.getWriter().write(callback);
  }catch (Exception ex){
     System.out.println("projectNameQuery.jsp error : " + ex);
     callback += "]";
     response.getWriter().write(callback);
  } finally {
     otaDbbean.cleanUp();
  }
%>


  三级联动通过ajax查询数据库实现

转载于:https://my.oschina.net/ren2881971/blog/87029