Ajax实现二级联动下拉框!

最新推荐文章于 2021-08-05 15:31:12 发布

apicescn

最新推荐文章于 2021-08-05 15:31:12 发布

阅读量2.1k

点赞数

分类专栏： Ajax 文章标签： ajax servlet xmlhttprequest xml import function

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个经典的Ajax应用示例，通过Ajax实现页面上两个级联选择框的动态加载。具体包括了使用JavaScript创建Ajax请求、后端Servlet响应处理及返回XML数据、解析XML并更新第二个选择框等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个Ajax的经典示例，也是Ajax的长处所在。不多说了，下面来看代码。

项目结构图：

index.jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <SCRIPT type="text/javascript">
        var _xmlHttpRequestObj;
        window.onload=function(){
        }

        function Change_Select()
        {
            var zhi=document.getElementById('hero').value;
            var url="servlet/SelectServlet?id="+encodeURIComponent(escape(zhi));
            _xmlHttpRequestObj=true;
     try {
       _xmlHttpRequestObj = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
       try {
        _xmlHttpRequestObj = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (E) {
        _xmlHttpRequestObj = false;
       }
     }
    if (!_xmlHttpRequestObj && typeof XMLHttpRequest!='undefined') {
     try {
      _xmlHttpRequestObj = new XMLHttpRequest();
     } catch (e) {
      _xmlHttpRequestObj=false;
     }
    }
    if (!_xmlHttpRequestObj && window.createRequest) {
     try {
      _xmlHttpRequestObj = window.createRequest();
      _xmlHttpRequestObj.overrideMimeType('text/xml');//设置MiME类别.
     } catch (e) {
      _xmlHttpRequestObj=false;
     }
    }

            if(_xmlHttpRequestObj)
            {
                _xmlHttpRequestObj.open("POST",url,true);
                _xmlHttpRequestObj.onreadystatechange=callback;
                _xmlHttpRequestObj.send();
            }
        }

        function callback()
        {
            if(_xmlHttpRequestObj.readyState == 4)
            {
                if(_xmlHttpRequestObj.status == 200)
                {
                    parseMessage();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }

        function parseMessage()
        {
            var xmlDoc=_xmlHttpRequestObj.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> </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 {
          doPost(request,response);
    }

    /**
     * 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 {
        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);
    }

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

}

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <servlet-name>SelectServlet</servlet-name>
    <servlet-class>com.SelectServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>SelectServlet</servlet-name>
    <url-pattern>/servlet/SelectServlet</url-pattern>
  </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

运行结果图：