`
ren2881971
  • 浏览: 109991 次
社区版块
存档分类
最新评论

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

阅读更多
//根据浏览器的类型创建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);
  }
}

<%@ 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();
  }
%>

分享到:
评论

相关推荐

    asp二级联动下拉框,三级联动下拉框

    2. **ASP后台处理**:在服务器端,如`asp二级联动下拉框.asp`文件中,你需要获取数据库中的相关数据,并根据一级下拉框的选择动态生成二级下拉框的选项。 3. **JavaScript或AJAX**:当一级下拉框的`onchange`事件...

    Ajax实现下拉框三级联动

    **Ajax实现下拉框三级联动**是Web开发中一种常见的交互设计,主要用于提高用户体验,让用户在选择一项数据时,能够即时地看到与之关联的下级数据,而无需等待整个页面重新加载。这种技术通常应用于地址选择、产品...

    AJAX版省市区三级联动下拉框

    在IT领域,"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计,尤其在网站表单中,用于用户选择地理位置时。这个技术基于AJAX(Asynchronous JavaScript and XML),它允许网页在不刷新整个页面的情况下与...

    Ajax实现三级联动下拉框

    ### Ajax实现三级联动下拉框的关键技术点与实践 在现代Web开发中,动态加载...综上所述,通过合理运用Ajax技术,结合DOM操作、事件监听和数据解析,可以高效地实现三级联动下拉框功能,提升Web应用的交互性和实用性。

    下拉框三级联动

    在IT行业中,"下拉框三级联动"是一个常见的交互设计模式,主要应用于数据筛选和信息检索,常见于网页和应用程序的表单设计中。这种设计允许用户通过选择一个选项触发其他下拉框的更新,形成一种联动效果,通常用于...

    三级联动 下拉框

    在网页设计和开发中,"三级联动下拉框"是一种常见的交互元素,它通常用于实现多级关联选择,比如省份-城市-区县的选择。这种功能可以极大地提高用户体验,尤其是在处理大量分类信息时。下面我们将深入探讨这个话题,...

    JSP页面下拉框三级联动

    本文将深入解析如何在JSP页面中实现下拉框的三级联动功能,以及其背后的实现原理。 ### JSP页面下拉框三级联动 #### 概念理解 下拉框三级联动是指在用户选择第一级下拉框选项时,第二级下拉框根据第一级的选择...

    省份城市区县_下拉框三级联动选择

    这种设计主要用于让用户在输入地址或选择地理位置时,通过三个相互关联的下拉框依次选取省份、城市和区县,确保数据的准确性和便捷性。下面将详细解释这个功能的实现原理、技术选型以及应用场景。 1. 实现原理: ...

    layui下拉框二级数据联动 fzzx.zip

    在这个场景中,我们讨论的是layui下的下拉框(select)的二级数据联动功能。 首先,`layui`的`select`组件是其UI库中的一个重要部分,它支持多选、搜索、远程加载等多种功能。在实际应用中,我们经常需要实现一个...

    Ajax 无限级 联动下拉框

    Ajax的核心是通过JavaScript创建XMLHttpRequest对象,它允许在后台与服务器进行异步数据交换。JavaScript调用XMLHttpRequest对象的open()方法建立与服务器的连接,send()方法发送请求,然后通过onreadystatechange...

    Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动

    综上所述,实现“jQuery各种插件和JQuery Ajax三级联动地区下拉框”涉及到jQuery库、插件开发、AJAX交互、DOM操作和性能优化等多个方面。这个功能不仅实用,而且对于学习和理解JavaScript和jQuery的深入使用非常有...

    自己手写的三级联动

    在三级联动的实现中,Ajax常用于在用户改变一级或二级菜单选择时,异步地向服务器发送请求,获取新的关联数据,然后更新相应的下拉菜单。 PHP(Hypertext Preprocessor)是一种广泛应用的开源脚本语言,特别适合于...

    AJAX二级下拉框联动

    在网页开发中,AJAX(Asynchronous JavaScript and XML)二级下拉框联动是一种常见的交互设计,用于提升用户体验,尤其在处理复杂表单或选择结构化数据时。这种技术允许用户在一个下拉框中做出选择后,根据所选值...

    Ajax实现二级/三级联动下拉框---servlet版

    在Web开发中,二级或三级联动下拉框是一种常见的交互设计,主要用于展示层次关系的数据,如省份-城市-区县的区域选择。本教程将详细讲解如何使用Ajax和Servlet技术来实现这一功能。 首先,我们需要了解Ajax...

    mvc3二级联动下拉框

    当用户在一级下拉框中做出选择时,会触发一个Ajax请求,控制器根据请求的数据返回对应的二级下拉框选项。 2. 视图(Views):视图负责渲染页面,包括下拉框的HTML结构。在ASP.NET MVC中,视图通常使用Razor语法编写...

    ajax的三级联动源码

    在JavaScript中,我们可以监听第一个下拉框的`change`事件,当用户做出选择时,使用AJAX发送GET请求,请求的数据是当前选中的值,服务器根据这个值返回对应的二级或三级列表,然后在前端更新其他下拉框。 **三、...

    AJax带数据库的三级联动

    总结来说,"AJax带数据库的三级联动"项目利用Ajax实现了前后端的无刷新通信,通过JavaScript处理用户交互并更新界面,而ASP.NET则在后台处理数据库查询,三者结合提供了流畅的地理选择体验。对于开发者来说,理解和...

    js下拉框三级联动菜单选择代码

    在网页开发中,"js下拉框三级联动菜单选择代码"是一种常见的交互设计,用于实现用户在选择省、市、区三个级别的下拉菜单时,选择一个级别后,下一个级别的菜单会根据前一个级别的选择自动更新。这种功能提高了用户...

    下拉框二级联动

    总的来说,“下拉框二级联动”是提高用户体验的一种有效方式,通过AJAX和JSON,我们可以实现前后端的高效通信,动态地更新页面内容,从而提供更加流畅的交互体验。在项目实践中,需要根据具体需求选择合适的技术栈和...

Global site tag (gtag.js) - Google Analytics