JAVA涂鸦
关于JAVA的点点滴滴
posts - 50,  comments - 689,  trackbacks - 0
这个一个ajax的经典示例,也是ajax的长处所在。不多说了,下面来看代码。

项目结构图:
option1.jpg

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 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
    }

}

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>/select</url-pattern>
  
</servlet-mapping>
    
    
<welcome-file-list>
        
<welcome-file>index.jsp</welcome-file>
    
</welcome-file-list>
</web-app>

运行结果图:
option2.jpg
posted on 2006-05-17 11:10 千山鸟飞绝 阅读(23978) 评论(25)  编辑  收藏 所属分类: Ajax

FeedBack:
# re: Ajax实现二级联动下拉框
2006-10-16 17:36 | yam
好东西
谢谢  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2006-11-20 09:48 | 孤枕
试了。效果不错。  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2006-12-08 11:05 | 980
哥们 我怎么没有测试出来呢 提示
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:254)

原来是缺少standard-1.0.6.jar。因为Ajax Tags运行的标签所对应的TLD需要org.apache.taglib包来解析,Tomcat4.1好像没有自带。


是这样吗 ???????????????

  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2007-04-25 10:26 | 1
我拷贝了你的js ,弹出了了对话框“Not able to retrieve desctiptionNot Found”  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2007-10-27 09:27 | hql
@1
var url="select?id="+escape(zhi);
你的url(上边的)写错了,检查以下吧.  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2007-10-27 09:30 | hql
有个问题问以下,为什么上面的程序在IE下运行正常,而在firefox就不正常了,怎么该才能兼容IE和Firefox?  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2007-10-29 20:52 | uidin
刚刚试了用struts标签也可以实现,但是想从页面上取得数据就不行,好像涉及到字符类型的问题  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2007-12-07 12:51 | 但是
还没试,用后在说  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2008-04-28 16:45 | 635151438
在ASP中怎么实现?  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2008-05-19 11:39 | 番队副
真好用,学习一下  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2008-05-29 19:00 | QQ:523519512
没有成功!  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2008-08-07 11:02 | java student
这个没有连接数据库啊 ?  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2008-09-11 15:44 | kerry
我这儿select_root.add(option);
改成select_root.options.add(option);才有用
难道楼主是打3C的?  回复  更多评论
  
# re: Ajax实现二级联动下拉框[未登录]
2008-09-16 14:34 | java fan
好像不能连接数据库啊 ?
如果不用连接数据库的话 几行代码就可以了 不用这么麻烦吧 ?  回复  更多评论
  
# re: Ajax实现二级联动下拉框[未登录]
2008-11-13 15:47 | 鸟人
简洁 明了   回复  更多评论
  
# re: Ajax实现二级联动下拉框[未登录]
2009-02-26 18:14 | aaa
改写的地方“如下 ”
select_root.options.add(option);(难道楼主是打3C的?)
var url="select?id="+escape(zhi); 改成 var url="SelectServlet?id="+escape(zhi);

  回复  更多评论
  
# re: Ajax实现二级联动下拉框[未登录]
2009-05-24 11:10 | super
代码测试通过!  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2009-08-14 14:23 | Movo
太感谢你了!  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2009-11-25 16:06 | 大鸟哥
我开始用 var xmlDoc=req.responseXML.documentElement;
始终执行到 var xSel=xmlDoc.getElementsByTagName('select');这一句报错,得到为空.我换成
var xmlStr=req.responseText;之后.
再创建一个js的xml解析对象来吧字符串转成对象,就可了.
楼主的方法我行不通,不知道原因,有知道的解释下谢谢  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2010-11-04 23:23 | silk
Ajax+HTML 能实现 吗?  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2011-03-26 21:42 | index
你好,老大,那我怎么传值到列表里面啊?谢谢了  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2011-04-01 16:15 | ddr
不知道为什么按照楼主原来的测试不通过:
把:
var xmlDoc=req.responseXML.documentElement;
改成:
var xmlDoc=req.responseXML;
其中:
var xSel=xmlDoc.getElementsByTagName('select');
要与类中的输出的标签名一致,也就是是<select></select>
类中输出的时候我这改成:
response.setContentType("text/xml;charset=GB2312");
PrintWriter out = response.getWriter();
out.write(last_xml);
out.close();
return null;
就通过了!  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2011-04-13 15:02 | ylll111
@ddr
////////////////////////////
其中:
var xSel=xmlDoc.getElementsByTagName('select');
要与类中的输出的标签名一致,也就是是<select></select>
///////////////////////////
这个xSel应该怎么获取呢。谢谢  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2011-07-09 15:14 | 安多
如果连数据库 后该如何 写 xml文件啊? 我把楼主的定值换成数据库查出来的就不好使了  回复  更多评论
  
# re: Ajax实现二级联动下拉框
2012-02-10 12:46 | lzy
怎么连库后返回汉字乱码,再javabean里面打印不是乱码 页面上乱码  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
正在阅读:



<2024年3月>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

常用链接

留言簿(35)

随笔档案

文章分类

文章档案

好友的blog

我的其他blog

老婆的Blog

搜索

  •  

积分与排名

  • 积分 - 771285
  • 排名 - 55

最新评论

阅读排行榜

评论排行榜