`
wangronaldo
  • 浏览: 99613 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

ajax级联

    博客分类:
  • ajax
 
阅读更多
<script type="text/javascript">
	
	
	      var xmlHttp;
	      
	      function createXMLHTTPRequest(){
	      
	          if(window.XMLHTTPRequest){
	          
	              xmlHttp = new XMLHTTPRequest();
	          }else if(window.ActiveXObject){
	              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	          }
	      }
	
	
	      function change(){
	         createXMLHTTPRequest();
	      
	         var id =  document.getElementById("p").value;
	         
	         var url = "validate_link.jsp?id="+id;
	         
	         xmlHttp.open("get",url,true);
	         
	         xmlHttp.onreadystatechange=callback;
	         
	         xmlHttp.send(null);
	      }
	      
	      
	      function callback(){
	      
	         if(xmlHttp.readyState==4){
	         
	            if(xmlHttp.status==200){
	            
	                prasXML();
	            }
	         }
	      
	      
	      }
	      
	      function prasXML(){
	      
	           var cityXML = xmlHttp.responseXML.documentElement;
	           
	           var cityNodes = cityXML.getElementsByTagName("city");
	           
	           
	           var c = document.getElementById("c");
	           c.options.length=0;
	           
	           
	           for(var i=0;i<cityNodes.length;i++){
	              
	               var id =  cityNodes[i].childNodes[0].childNodes[0].nodeValue;
	               var name =  cityNodes[i].childNodes[1].childNodes[0].nodeValue;
	               
	               var o = new Option(name,id);
	               
	               c.add(o);
	           }
	           
	           if(cityNodes.length==0){
	               var o = new Option("城市","0");
	               c.add(o);
	           }
	      }
	</script>

  </head>
  
  <%
   
        Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
		Connection conn = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;DatabaseName=data","sa","123456");
		
		String sql = "select * from provice";
		
		PreparedStatement ps  =conn.prepareStatement(sql);
		
		ResultSet rs =   ps.executeQuery();



 %>
  
  <body>
       省份:
       <select name="provice" onchange="change()" id="p">
           <option value="0">省份</option>
           <%
              while(rs.next()){
            %>
                <option value="<%=rs.getInt("id")%>"><%=rs.getString("name")%></option>
            <%
              }
              rs.close();
              ps.close();
              conn.close();
             %>
       </select>
       
       城市:
       <select  id="c">
            <option value="0">城市</option>
       </select>
    
    
  </body>


<%
     response.setContentType("text/xml;charset=UTF-8");
     
     
     int id = Integer.parseInt(request.getParameter("id"));
     
     //System.out.println("----------"+id);
     Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
	 Connection conn = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;DatabaseName=data","sa","123456");
		
	 String sql = "select * from city where pid=?";
		
	 PreparedStatement ps  =conn.prepareStatement(sql);
		
	 ps.setInt(1,id);
		
	 ResultSet rs =   ps.executeQuery();
	 
	 StringBuffer sb = new StringBuffer();
	 sb.append("<cities>");
	 while(rs.next()){
	     
	     sb.append("<city><id>"+rs.getInt("id")+"</id><name>"+rs.getString("name")+"</name></city>");
	 		
	 }
	 sb.append("</cities>");
	 rs.close();
	 ps.close();
	 conn.close();
	 //System.out.println(sb.toString());
	 response.getWriter().write(sb.toString());
	 


%>
分享到:
评论

相关推荐

    AJAX级联下拉框源码

    AJAX级联下拉框是一种常见的前端交互设计,它利用Ajax技术实现在用户选择一个下拉选项时,动态地更新另一个相关联的下拉框内容。这种功能在数据关联、筛选和表单填写中非常常见,例如省份和城市的选择,类别和子类别...

    Ajax级联下拉列表

    使用Ajax来实现下拉列表的级联显示,通俗易懂,思路清晰,适合刚刚接触Ajax的开发者来理解Ajax

    Ajax级联下拉列表.rar

    在本示例中,"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据...

    Jquery 实例:Ajax级联下拉框效果

    这是一个利用了Ajax技术的一个Jquery实例,动态的生成级联的下拉列表框,在中关村zol中经常可以看到。如果遇到无法显示的情况,请自己阅读代码。

    ajax级联下拉forJava

    在本教程"ajax级联forJava"中,我们将探讨如何使用Ajax、JavaScript以及Java来实现级联下拉框的功能。 级联下拉框常用于需要展示关联数据的场景,如国家和城市的选择,当用户选择一个国家后,下拉框会动态更新并...

    struts+hibernate+ajax级联菜单

    本项目"struts+hibernate+ajax级联菜单"结合了这三者,旨在实现一种交互性更强的前端菜单功能。 首先,Struts是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它主要用于控制应用程序的流程,处理...

    Ajax 实现级联菜单

    在实现Ajax级联菜单时,首先需要使用JavaScript处理用户的交互事件,如点击或选择某个选项。通常,我们会为相关元素添加事件监听器,当用户触发特定行为时,执行相应的函数。 3. **XMLHttpRequest对象**: ...

    Ajax级联案例

    Ajax级联是一种在Web开发中实现数据动态交互的技术,它允许网页部分刷新,而不必重新加载整个页面。这种技术在用户界面中提供了更流畅、更快速的体验,尤其是在处理复杂表单和多级选择时。在ACCP(Advanced ...

    Java Jquery ajax级联

    【Java Jquery ajax级联】是一种常见的前端与后端数据交互技术,用于实现网页上的下拉框联动效果。在Web开发中,用户在一个下拉列表(Select)的选择会影响到另一个下拉列表的内容,这种功能通常通过AJAX(异步...

    一个用ajax级联菜单的例子

    【Ajax级联菜单】是一种常见的前端交互设计,它利用了Asynchronous JavaScript and XML(异步JavaScript和XML)技术,能够实现在用户选择某一项时,无需刷新整个页面就能动态加载和展示相关数据。在本例子中,我们有...

    数据库Ajax级联效果,实用性较强

    在IT行业中,数据库Ajax级联效果是一种常见的前端与后端交互技术,主要用于提高用户体验和页面的响应速度。这种效果在汽车类网站中尤其常见,例如在描述中的“汽车类型,汽车轮胎,汽车轮胎图片”这样的三级联动场景...

    ajax级联效果demo

    自己做的一个ajax级联效果的案例 根据前面选择的省份自动变化响应的市级目录 可以参考下 完成更好的任务

    ajax级联的例子,需oralce的支持

    这个"ajax级联的例子,需Oracle的支持"显然涉及到使用Ajax实现数据的级联加载,同时与Oracle数据库进行交互。级联通常指的是在前端UI组件(如下拉框)中,一个选项的选择会影响到另一个相关组件的显示内容。例如,...

    用AJAX实现的级联菜单

    在网页设计中,级联菜单(Cascading Menu)是一种常见的交互元素,它允许用户通过层级结构来选择或浏览选项。...通过学习和分析这些代码,我们可以加深对AJAX级联菜单实现的理解,并将其应用到自己的项目中。

    SSH(Spring+Struts2+Hibernate)登录与AJAX级联

    SSH(Spring、Struts2、...总结,这个SSH登录与AJAX级联的demo展示了如何利用SSH框架进行后端业务处理,结合AJAX提供流畅的前端交互。开发者可以通过这个项目学习到如何整合这些技术,提高开发效率和代码质量。

    Ajax级联选择框:以中国的省市地区三级联动选择为例

    本示例以中国的省市地区三级联动选择为例,讲解如何实现一个Ajax级联选择框。这样的功能常见于网站注册、地址填写等场景,用户在选择省份后,城市和区县会根据所选省份动态加载,提供流畅的用户体验。 首先,我们来...

    Ajax级联下拉

    Ajax级联下拉是一种常见的前端交互技术,常用于构建动态的、交互性强的网页应用,如地址选择器或分类过滤等。在这个项目中,我们主要关注的是如何利用Ajax实现中国省份与城市之间的级联下拉效果,同时结合MySQL...

    AJAX级联下拉框的简单实现案例

    AJAX级联下拉框是一种常见的Web界面交互设计,主要用于简化用户选择多个相关联数据的步骤。在多个下拉列表中,当用户选择了一个选项后,下一个下拉列表会根据前一个的选择来动态更新其内容。这种设计方式可以提高...

    java实现Ajax级联菜单

    在IT行业中,级联菜单(Cascading Menu)是一种常见的用户界面元素,它允许用户通过多级选择来筛选或导航到特定的信息。在本案例中,我们关注的是如何使用Java和Ajax技术来实现一个二级联动的菜单。Ajax,即...

    Ajax 级联显示

    总之,"Ajax级联"示例涵盖了从前端到后端的基本Ajax交互过程,演示了如何利用Ajax实现动态、无刷新的交互效果,这对于网页应用的动态性和用户友好性至关重要。通过学习和实践这个示例,你可以更好地理解和掌握Ajax在...

Global site tag (gtag.js) - Google Analytics