`
wiiln
  • 浏览: 151912 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ajax二级联动下拉框

    博客分类:
  • Ajax
阅读更多
页面:index.html

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
<head>
    <title>My JSP 'index.html' starting page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <SCRIPT type="text/javascript">
        var req;
        window.onload=function(){
        }
       
        function Change_Select()
        {
            var zhi=document.getElementById('hero').value;
            var url="select?id="+escape(zhi);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
           
            if(req)
            {
                req.open("GET",url,true);
                req.onreadystatechange=callback;
                req.send(null);
            }
        }
       
        function callback()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
       
        function parseMessage()
        {
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('skill');
            select_root.options.length=0;
           
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }
           
           
        }
    </SCRIPT>
  </head>
 
  <body>
    <div align="center">
        <form name="form1" method="post" action="">
            <TABLE width="70%" boder="0" cellspacing="0">
                <TR>
                    <TD align="center">Double Select Box</TD>
                </TR>
                <TR>
                    <TD>
                        <SELECT name="hero" id="hero" onChange="Change_Select()">
                            <OPTION value="0">Unbounded</OPTION>
                            <OPTION value="1">D.K.</OPTION>
                            <OPTION value="2">NEC.</OPTION>
                            <OPTION value="3">BOSS</OPTION>
                        </SELECT>
                        <SELECT name="skill" id="skill">
                            <OPTION value="0">Unbounded</OPTION>
                        </SELECT>
                    </TD>
                </TR>
                <TR><td>&nbsp;</td></TR>
            </TABLE>
        </form>
    </div>
  </body>
</html>

SelectServlet.java:
package com;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SelectServlet extends HttpServlet {

    /**
     * Constructor of the object.
     */
    public SelectServlet() {
        super();
    }

    /**
     * Destruction of the servlet. <br>
     */
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     *
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/xml");
        response.setHeader("Cache-Control","no-cache");
       
        String targetId=request.getParameter("id").toString();
        String xml_start="<selects>";
        String xml_end="</selects>";
        String xml="";
        if(targetId.equalsIgnoreCase("0")){
            xml="<select><value>0</value><text>Unbounded</text></select>";
        }else if(targetId.equalsIgnoreCase("1")){
            xml="<select><value>1</value><text>Mana Burn</text></select>";
            xml +="<select><value>2</value><text>Death Coil</text></select>";
            xml +="<select><value>3</value><text>Unholy Aura</text></select>";
            xml +="<select><value>4</value><text>Unholy Fire</text></select>";
        }else if(targetId.equalsIgnoreCase("2")){
            xml="<select><value>1</value><text>Corprxplode</text></select>";
            xml +="<select><value>2</value><text>Raise Dead</text></select>";
            xml +="<select><value>3</value><text>Brilliance Aura</text></select>";
            xml +="<select><value>4</value><text>Aim Aura</text></select>";
        }else{
            xml="<select><value>1</value><text>Rain of Chaos</text></select>";
            xml +="<select><value>2</value><text>Finger of Death</text></select>";
            xml +="<select><value>3</value><text>Bash</text></select>";
            xml +="<select><value>4</value><text>Summon Doom</text></select>";
        }
        String last_xml=xml_start+xml+xml_end;
        response.getWriter().write(last_xml);
    }

    /**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     *
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doGet(request,response);
    }

    /**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occure
     */
    public void init() throws ServletException {
        // Put your code here
    }

}


Java软件工程师推荐书籍:
开发者突击:Struts 2核心技术与Java EE框架整合开发实战
轻量级Java EE企业应用实战——Struts 2+Spring+Hibernate
JAVA核心技术卷II:高级特性
全新正版《Java程序设计应用基础教程》石号仓
Java编程思想(第4版)

网购通


分享到:
评论

相关推荐

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

    二级联动下拉框是指两个下拉框之间存在依赖关系,当用户在第一个下拉框中做出选择时,第二个下拉框的内容会根据选择进行更新。这种功能通常通过JavaScript或AJAX与服务器进行交互来实现。 1. **HTML结构**:首先,...

    mvc3二级联动下拉框

    5. Ajax:ASP.NET MVC支持Ajax操作,使用Ajax.BeginForm或jQuery的$.ajax方法,可以实现无刷新更新页面部分内容,这对于二级联动下拉框的实时更新至关重要。 6. 数据绑定:在ASP.NET MVC中,可以使用MVVM(Model-...

    ajax++jsp二级联动下拉框,无刷新分页

    以上就是关于"ajax++jsp二级联动下拉框,无刷新分页"这一主题的相关知识点,涵盖了Ajax、JSP、二级联动下拉框和无刷新查询等多个方面。通过这些技术,开发者可以创建出更高效、更友好的Web应用程序。

    Ajax 无限级 联动下拉框

    当用户在一级下拉框选择某个选项时,二级下拉框会根据所选内容动态加载相关数据,以此类推。这种效果可以通过Ajax实现,每级下拉框的选项改变时,都触发一个Ajax请求,获取并填充下一级别的选项。 三、实现步骤 1. ...

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

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

    AJAX二级下拉框联动

    在“AJAX二级下拉框联动”中,主要涉及以下几个关键知识点: 1. **AJAX基础**:AJAX 是一种创建动态网页的技术,通过在后台与服务器进行少量数据交换,使网页实现异步更新。它利用JavaScript创建XMLHttpRequest对象...

    二级联动下拉框

    在网页设计和开发中,"二级联动下拉框"是一种常见的交互元素,它通常用于实现多级选择或者关联数据的筛选。例如,在选择省份时,第一个下拉框会选择省份,当选择一个省份后,第二个下拉框会动态加载并显示该省份的...

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

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

    市区二级联动下拉框

    在网页开发中,"市区二级联动下拉框"是一个常见的功能需求,特别是在用户需要选择地址时,例如填写收货地址。这种设计允许用户先选择省份(一级),然后根据选择的省份加载对应的市(二级)列表,以此提高用户体验,...

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

    在提供的`fzzx.zip`压缩包中,包含了一个名为`a.html`的文件,这个文件很可能是用来展示如何实现layui下拉框二级联动的示例代码。打开这个HTML文件,我们可以看到一个包含两个下拉框的页面,第一个下拉框(一级)...

    三级联动 下拉框

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

    ajax 实现二级下拉框,地址联动,serverlet,java,xmlHttp

    在这个特定的场景中,我们讨论的是如何使用Ajax实现二级下拉框的联动,以及涉及到的技术如Servlet、Java和XMLHttp。 首先,二级下拉框联动通常用于地理信息的选择,例如省份选择后,城市下拉框自动更新对应省份的...

    smarty ajax 下拉框二级联动

    Smarty + Ajax 下拉菜单二级联动: 1. 建立数据库ajaxtest (使用utf8) 2. 进行conn.php 修改root密码 3. 导入表 product.sql --- 主产品 4. 导入表 producttest.sql -- 二级产品 弄好后运行:...

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

    在我们的案例中,可能会有一个插件专门处理三级联动下拉框的逻辑。 **二、AJAX技术** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。在我们的场景中,当用户...

    使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

    在本文中,我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果,这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容,例如在选择省份后,...

    Asp+xml+数据库 - 四级联动下拉框

    四级联动下拉框是一种常见且实用的设计模式,尤其适用于导航大型复杂的数据结构,如组织结构、地区分类或者产品目录。这种设计允许用户逐步细化他们的选择,通过四个级别来过滤结果。在本案例中,我们将探讨如何使用...

    js2级省市联动下拉框

    在网页开发中,"js2级省市联动下拉框"是一种常见的交互设计,它用于创建一个用户友好的界面,让用户能够方便地选择省份和城市。这个功能通常在填写地址、设置配送区域等场景中出现。下面我们将详细探讨如何实现这样...

    php 三级联动下拉框

    在网页设计中,三级联动下拉框是一种常见的交互元素,特别是在数据层级结构比较复杂的场景下,如地区选择、产品分类等。它通过三个下拉菜单的级联关系,让用户能够逐步细化选择,从大类到小类,最终精确地选取目标...

    ajax实现二级下拉框和用户名校验

    JavaScript(通常是jQuery库)会监听一级下拉框的`change`事件,当用户选择一项时,触发Ajax请求,服务器返回新的下拉框选项,然后动态更新二级下拉框。 **实现步骤:** 1. 创建HTML结构,包括两个下拉框。 2. 使用...

Global site tag (gtag.js) - Google Analytics