`

Ajax制作二级联动下拉列表框

 
阅读更多

Ajax制作二级联动下拉列表框

1.index.jsp

复制代码
 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <html>
 3   <head>
 4     <script type="text/javascript" language="javaScript">
 5       var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
 6       function createXMLHttpRequest() {
 7         if(window.ActiveXObject) { //Internet Explorer时，创建XMLHttpRequest对象的方法
 8           try {
 9             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
10           } catch(e) {
11             try {
12               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
13                //旧版本的Internet Explorer，创建XMLHttpRequest对象
14             } catch(e) {
15               window.alert("创建XMLHttpRequest对象错误"+e);
16             } 
17           }
18         } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法
19           xmlHttp = new XMLHttpRequest();
20         } 
21         if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
22             window.alert("创建XMLHttpRequest对象异常！");
23         }  
24       }
25 
26       //下拉列表项改变时的操作
27       function proChange(objVal) {
28         createXMLHttpRequest(); //创建XMLHttpRequest对象
29         document.getElementById("city").length = 1;     //根据ID获取指定元素，并赋值
30         xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数
31         var url = "/ComboTest/servlet/CityServlet?province=" + objVal; //请求的URL地址
32         xmlHttp.open("GET",url,true);
33         xmlHttp.send(null);
34       }
35       
36       function cityList() { //onreadystatechange的处理函数
37         if(xmlHttp.readyState==4) {
38           if(xmlHttp.status==200) {
39             parseXML(xmlHttp.responseXML);     //解析服务器返回的XML数据
40           }
41         }
42       }
43 
44       //解析xml信息，以添加地市
45       function parseXML(xmlDoc) {
46         var len = xmlDoc.getElementsByTagName("city");
47         //获取XML数据中所有的“city”元素对象集合
48         var _citySel = document.getElementById("city");     //根据ID获取页面中的select元素
49         for(var i=0;i<len.length;i++) { //遍历XML数据并给select元素添加选项
50           var opt = document.createElement("OPTION");     //创建option对象
51           opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
52           //指定新创建元素的text属性值
53           opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
54           //指定新创建元素的value属性值
55           _citySel.add(opt); //为select元素添加option
56         }
57       }
58     </script>
59     <title>动态加载组合框</title>
60   </head>
61   <body>
62     <table align="center" border=1 width="320">
63       <tr>
64         <td>省份：</td>
65         <td>
66           <select id="province" onchange="proChange(this.value);" style="width:85">
67             <option value="gd">广东</option>
68             <option value="gx">广西</option>
69             <option value="hn">湖南</option>
70             <option value="hb">湖北</option>
71             <option value="ah">安徽</option>
72           </select>
73         </td>
74       </tr>
75       <tr>
76         <td>地市：</td>
77         <td>
78           <select id="city" style="width:85">
79             <option value="">--请选择--</option>
80           </select>
81         </td>
82       </tr>
83     </table>
84   </body>
85 </html>
复制代码

2.CityServlet.java

复制代码
 1 public class CityServlet extends HttpServlet {
 2     private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";
 3 //设置返回响应的ContentType
 4     /**
 5      *当前Servlet对象构造方法
 6      */
 7     public CityServlet() {
 8         super();
 9     }
10     /**
11      * 当前Servlet销毁时的操作。<br>
12      */
13     public void destroy() {
14         super.destroy();
15     }
16     /**
17      * 当前Servlet的doGet方法。<br>
18      *
19      * 当客户端表单的“method”类型为“get”时，调用此方法
20      * 
21      * @param request客户端请求对象
22      * @param response 服务器响应对象
23      * @throws ServletException 发生ServeltException时抛出
24      * @throws IOException 发生IOException时抛出
25      */
26     public void doGet(HttpServletRequest request, HttpServletResponse response)
27             throws ServletException, IOException {
28         response.setContentType(CONTENT_TYPE); //设置服务器响应类型
29         String province =request.getParameter("province");
30         StringBuffer city = new StringBuffer("<citys>"); //记录返回XML串的对象
31         List list = cityInit(); //获取城市列表
32         if("gx".equals(province)) {
33             for(int i=0;i<list.size();i++) {
34                 city.append("<city>"+list.get(i)+"</city>");
35             }            
36         }
37         city.append("</citys>");
38         PrintWriter out = response.getWriter();
39         out.print(city.toString());
40         out.flush(); //输出流刷新
41         out.close(); //关闭输出流
42     }
43 
44     /*
45      * 初始化城市
46      */
47     public List<String> cityInit() {
48         List<String> cityList = new ArrayList<String>();
49      //添加城市列表
50         cityList.add("南宁");
51         cityList.add("桂林");
52         cityList.add("北海");
53         cityList.add("河池");
54         cityList.add("梧州");
55         cityList.add("玉林");
56     return cityList;
57 }
58 
59     /**
60      *当前Servelt的初始化方法. <br>
61      *
62      * @throws ServletException发生ServletExceptio时抛出
63      */
64     public void init() throws ServletException {
65     }
66 }
复制代码

3.web.xml

复制代码
 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="2.5" 
 3     xmlns="http://java.sun.com/xml/ns/javaee" 
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 6     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 7 <servlet>
 8     <description>This is the description of my J2EE component</description>
 9     <display-name>This is the display name of my J2EE component</display-name>
10     <servlet-name>CityServlet</servlet-name>
11     <servlet-class>wen.CityServlet</servlet-class>
12   </servlet>
13   <servlet-mapping>
14     <servlet-name>CityServlet</servlet-name>
15     <url-pattern>/servlet/CityServlet</url-pattern>
16   </servlet-mapping>
17   <welcome-file-list>
18     <welcome-file>index.jsp</welcome-file>
19   </welcome-file-list>
20 </web-app>
复制代码
分享到：
| Ajax制作Web进度条
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于Ajax的二级联动下拉列表.rar

    在网页设计中，二级联动下拉列表是一种常见的交互元素，常用于实现地区选择、产品分类等场景。这里的“基于Ajax的二级联动下拉列表”是一个技术实现方案，它结合了Ajax（异步JavaScript和XML）技术和HTML、CSS、...

    ajax的二级联动下拉列表

    本文将深入探讨如何使用Ajax实现二级联动下拉列表，这是一种常见且实用的功能，尤其在数据筛选和表单填写时。联动下拉列表通常出现在需要根据父级选择项动态加载子级选项的场景，例如省份与城市的选择。 首先，我们...

    Ajax二级联动下拉列表框

    ### Ajax 实现二级联动下拉列表框 #### 一、简介 在Web开发中，有时我们需要根据用户在第一个下拉列表中的选择动态地更新第二个下拉列表的内容。这种功能被称为“二级联动”，常用于地址选择（如省份和城市的选择）...

    ajax dwr 框架实现二级联动下拉列表源码

    **Ajax DWR 框架实现二级联动下拉列表源码详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。DWR（Direct Web Remoting）则是一个用于Java web应用的开源...

    用ajax实现的jsp二级联动下拉列表

    在网页开发中，二级联动下拉列表是一种常见的交互设计，尤其在处理层级关系的数据时，如省份-...总之，通过AJAX和JSP的结合，我们可以构建一个流畅、高效且用户友好的二级联动下拉列表，极大地提升了网页的交互体验。

    ajax 二级联动 php的下拉列表

    ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表

    省市二级联动下拉列表框

    省市二级联动下拉列表框是一种常见的前端交互设计，主要用于用户在选择省份时，根据所选省份动态加载对应的市区选项。这种功能在注册、地址填写、订单管理等场景中非常常见，提高了用户输入的效率和准确性。 在前端...

    Ajax+PHP二级联动下拉列表.rar

    在网页开发中，二级联动下拉列表是一种常见的交互设计，常用于地区选择、产品分类等场景，用户在选择一级选项后，二级选项会相应更新。本案例“Ajax+PHP二级联动下拉列表”就是实现这一功能的一个实例。下面将详细...

    帝国CMS二级联动插件(ajax下拉列表) 帝国CMS二级联动插件(ajax下拉列表).rar

    本压缩包“帝国CMS二级联动插件(ajax下拉列表).rar”提供的就是针对帝国CMS系统的一个二级联动插件，利用AJAX技术实现实时数据加载。AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，...

    ajax 异步实现两级联动下拉列表和输入提示

    以上就是基于AJAX实现的二级联动下拉列表和输入提示的基本原理和步骤。这个项目是一个典型的实例，可以帮助开发者了解如何在实际应用中运用这些技术。通过不断实践和优化，我们可以提供更加高效、友好的用户体验。

    Ajax实现java web 中下拉列表二级联动

    在Java Web开发中，二级联动下拉列表是一种常见的交互功能，通常用于地区选择、类别分类等场景。...通过以上步骤和注意事项，我们就可以在Java Web应用中成功实现Ajax驱动的二级联动下拉列表，提升用户的交互体验。

    php代码实现二级联动下拉菜单效果

    在网页设计中，二级联动下拉菜单是一种常见的交互元素，常用于分类选择或者地区筛选等场景。这种功能的实现通常涉及到前端和后端的交互，其中PHP作为后端语言，负责处理数据并返回给前端。本篇文章将详细介绍如何...

    无限级、无刷新、联动下拉列表框

    在IT领域，尤其是在Web开发中，"无限级、无刷新、联动下拉列表框"是一种高效且用户体验良好的设计模式。这种技术通常应用于大型数据结构，如层级数据或分类系统，例如组织架构、地区层级或者产品分类等。在ASP.NET...

    三级联动下拉列表框（SELECT）jquery插件（js 三级联动） php版

    在IT领域，尤其是在Web开发中，"三级联动下拉列表框"是一种常见的交互设计，它通常用于地域选择、产品分类等场景，用户在选择一级选项后，二级、三级选项会根据一级的选择动态加载。本项目是基于jQuery实现的，配合...

    数据库三级联动下拉列表

    在IT领域，数据库三级联动下拉列表是一种常见的交互设计，常用于网站或应用程序中，以提供用户更加便捷的导航和信息筛选。这种设计通常应用于有层次结构的数据，例如省份-城市-区县，或者类别-子类别-产品等。在这个...

    php+ajax二级联动

    在IT行业中，"php+ajax 二级联动"是一种常见的前端交互技术，主要用于构建动态、无刷新的用户界面。这种技术可以提升用户体验，因为用户在选择一个选项时，无需等待整个页面刷新，就能实时看到下级选项的变化。接...

    js 省市区select 三级联动(全国城市三级联动下拉列表)

    本文将详细介绍如何使用JavaScript实现全国城市三级联动下拉列表，并结合提供的资源进行解析。 首先，理解“三级联动”的概念：当用户在一级下拉列表（如省份）中选择一个选项时，二级下拉列表（如城市）会根据所选...

    asp.net(c#)与数据库关联的二级联动下拉选择

    在这个项目中，我们使用C#编程语言和ASP.NET框架，结合AJAX控件技术，实现了与数据库动态关联的二级联动下拉列表。以下是对这个知识点的详细说明： 首先，我们需要理解ASP.NET中的Web Forms架构，这是ASP.NET的基础...

    jquery 通用三级联动下拉列表.rar

    ,　用Jquery实现的三级联动下拉列表插件，压缩包内有多个不同的版本，其实现的基本原理大同小异，无非是调用方式的不同，第一个是通过读取XML构建，支持IE/firefox，chrome不支持，XML部分可以改成AJAX的方式，这样...

    ASP 实用的ajax二级联动菜单

    在本项目中，"ASP 实用的ajax二级联动菜单"是一个结合了这两种技术的应用，旨在创建一个响应快速、交互流畅的二级菜单系统。 在ASP中，我们通常会使用VBScript或JScript作为脚本语言来处理服务器端逻辑。在这个案例...

Magicbox
Global site tag (gtag.js) - Google Analytics