`
vissul
  • 浏览: 194306 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

简单的 无刷新 ajax 级联

阅读更多

//前台ajax页面

<html>
 <head>
  <title></title>
 <script type="text/javascript">
 var req;
function session(callback, url, param,objArray) {

 if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
 } else {
  if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();
  }
 }
 req.open("post", url, true);
 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 req.onreadystatechange = function(){callback(objArray);}
 if (param == null) {
  param = 1;
 }
 req.send(param);
}
function getlist(objArray){
 if(req.readyState == 4){
  if(req.status ==200){
   var data = req.responseText;
   if(objArray ==1){
    document.getElementById("country").style.display ="block";
    document.getElementById("country").innerHTML = data;
   }
    if(objArray ==2){
    document.getElementById("city").style.display ="block";
    document.getElementById("city").innerHTML = data;
   }
  }
 }

}
  </script>
  <style type="text/css">
li{
display:block;
width:120px;
list-style-type:none;
float:left;
margin:0;
padding:4;

}
ul{
width:600px;
float:left;
margin:0;
padding:0;
text-align:left;
}
</style>
 </head>
 <body> 
 <table align=center>
 <tr><td><div id="continent">
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=ASIA','1')">亚洲</a>
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=EUROPE','1')">欧洲 </a>
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=AMERICA','1')">美洲 </a>
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=AFRICA','1')">非洲</a>
  <a href="javascript:session(getlist,'countrylist.jsp','ContinentCode=OCEANIA','1')">大洋洲 </a>
 </div></td></tr>
 <tr><td><div id="country" style="display:none"></div></td></tr>
 <tr><td><div id="city" style="display:none"></div></td></tr></table>
 </body>
</html>

//后台jsp页面

  <table align="center"><tr><td width="200"><ul>
  <%
   String ContinentCode = request.getParameter("ContinentCode");
   //System.out.print(ContinentCode);
   CountryDAO countryOption = new CountryDAO();
   Vector list = new Vector();
   if(ContinentCode!=null){
   list =  countryOption.getCountryByContinentCode(ContinentCode);
   }
   for(int i = 0 ;i<list.size();i++){
     CountryBean country = (CountryBean)list.get(i);
    %>
<li>
<a href="javascript:session(getlist,'citylist.jsp','CountryCode=<%=country.getCoutryCode()%>','2')"><%=country.getNameCN() %></a>
</li>
    <%
    }
   %>
   </ul></td></tr>
  </table>

  • 大小: 219.2 KB
分享到:
评论
1 楼 amuj2ee 2008-06-25  
可以运行吗 ?

相关推荐

    无刷新级联菜单

    在实现无刷新级联菜单时,通常会用到两种关键技术:**Jquery** 和 **Ajax**。**Jquery** 是一个流行的JavaScript库,简化了DOM操作、事件处理和动画效果,使得在前端构建动态交互变得简单。**Ajax**(Asynchronous ...

    AJAX级联下拉框源码

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

    ajax,jsp,servlet无刷新实现级联效果。

    "ajax,jsp,servlet无刷新实现级联效果"是一个常见的应用场景,主要涉及的技术包括Ajax(异步JavaScript和XML)、Java Servlet以及JSP(JavaServer Pages)。在这个场景中,我们将探讨如何通过这些技术实现在网页上...

    Ajax 实现级联菜单

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

    ajax实现可配置无刷新级联下拉框

    **Ajax 实现可配置无刷新级联下拉框** 在 Web 开发中,为了提供用户友好的交互体验,级联下拉框(Cascading Dropdown)是一个常见的需求。级联下拉框允许用户在一个下拉框中选择一个选项后,根据所选的选项动态更新...

    Ajax级联下拉列表.rar

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

    利用AJAX+ASP.NET实现省、市、县页面无刷新动态级联效果

    "利用AJAX+ASP.NET实现省、市、县页面无刷新动态级联效果"这一技术主题,就是针对这种需求的具体解决方案。在这个过程中,用户在选择省份时,城市和县(区)会根据所选省份自动更新,无需用户手动刷新页面,极大地...

    jQuery+ajax实现三级级联

    ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在三级级联中,每当用户在一级或二级下拉菜单中做出选择时,会通过ajax发送异步请求到服务器,...

    Ajax级联案例

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

    Ajax三级无刷新级联实例使用CallBackObject.js 简易Ajax框架

    这个“三级无刷新级联实例”是Ajax在Web开发中的典型应用,它允许用户在选择某个选项时,不需刷新页面即可动态获取并展示下级选项,通常用于如地区选择、类别筛选等场景。 在这个实例中,我们看到使用了名为`...

    用AJAX实现的级联菜单

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

    Jquery Ajax 动态级联

    本主题将深入探讨如何利用jQuery AJAX实现动态级联效果,即二级联动下拉菜单,这种功能通常用于多级分类选择或者地区选择等场景。 首先,让我们了解什么是jQuery和AJAX。jQuery是一个强大的JavaScript库,简化了...

    Ajax级联菜单,通过dwr框架实现省份城市级联效果

    在这个特定的场景中,我们利用Ajax技术和Direct Web Remoting(DWR)框架来创建一个动态的省份城市级联菜单。这个功能能够提升用户体验,因为它减少了用户手动刷新页面的需求,提供了流畅的交互。 首先,我们需要...

    ajax级联下拉forJava

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

    java实现Ajax级联菜单

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

    Java Jquery ajax级联

    在Web开发中,用户在一个下拉列表(Select)的选择会影响到另一个下拉列表的内容,这种功能通常通过AJAX(异步JavaScript和XML)来实现,它能够无刷新地更新页面部分数据。 在Java环境中,服务器端处理AJAX请求通常...

    三级行业动态无刷新 级联菜单

    在IT行业中,无刷新(Ajax)技术和级联菜单(Cascading Menu)是网页开发中的常见功能,尤其在处理多级分类数据时显得尤为重要。"三级行业动态无刷新级联菜单"是一个旨在解决传统网页刷新问题,提供高效用户体验的...

    struts+hibernate+ajax级联菜单

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

    基于iBatis,ajax从数据库取数的无刷新级联

    标题中的“基于iBatis,ajax从数据库取数的无刷新级联”指的是在Web开发中,使用iBatis作为持久层框架,结合Ajax技术,实现动态从数据库获取数据并更新视图,而无需页面整体刷新,从而提高用户体验。这里涉及的主要...

    Ajax级联下拉

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

Global site tag (gtag.js) - Google Analytics