| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7586247
建立时间:2006年5月29日 |
| |
|
 [Java Open Source]二级联动下拉框
软件技术
lhwork 发表于 2006/7/24 10:18:43 |
|
这个一个ajax的经典示例，也是ajax的长处所在。不多说了，下面来看代码。项目结构图：500)this.width=500'>index.jsp: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><%@ 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>SelectServlet.java:Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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 }}web.xml:Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><?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>/select</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>运行结果图：500)this.width=500'> |
|
|