用ajax实现二级联动

来源：互联网发布：火绒安全软件杀毒编辑：程序博客网时间：2024/05/20 04:49

1.首先写一个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 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> </td></TR>
   </TABLE>
   </form>
   </div>
  </body>
</html>

2.其次写一个servlet类

/**
*
*/
package com.lcy;
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
   }

}

3.在web.xml中增加

如下：

<servlet>
   <servlet-name>SelectServlet</servlet-name>
   <servlet-class>com.lcy.SelectServlet</servlet-class>
  </servlet>

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

4.放在tomcat下运行就可以了