联动动态列表问题

我按书本上的照抄了一下程序，但是没有达到联动的效果啊……
DynamicList.jsp：<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'DynamicList.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->  </head>
   <script language="javascript">
  function createXMLHttpRequest()
  {
    if(window.XMLHttpRequest)
    {
    //Mozilla浏览器
    XMLHttpReq = new XMLHttpRequest();
    }else
    {//IE浏览器
    if(window.ActiveXObject)
      {
      try{
      XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
      }catch(e){
               try
               {
               XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
               }catch(e)
                  {
                  }
               }
      }
    }
  }
  
   //处理服务器相应的结果
  function handleResponse()
  {
   
    if(XMLHttpReq.readyState==4)
    { //信息已经成功返回，开始处理信息
      if(XMLHttpReq.status==200)
      {
      clearList();
      var out = "";
      var res = XMLHttpReq.responseXML;
      var students = res.getElementsByTagName("student");
      for(var i =0;i<students.length;i++)
        {
      var id = students(i).getElementsByTagName("id")[0].firstChild.nodeValue;
      var name = students(i).getElementsByTagName("name")[0].firstChild.nodeValue;
      appOption(id,name);
        }
      
      }
    }
  }
  
  //清除下拉列表中的值
  function clearList()
  {
   var studentsList = document.getElementById("students");
   while(studentsList.childNodes.length>0)
   {
   studentsList.removeChild(studentsList.childNodes[0]);
   }
  }
  
  //把满足条件的学生添加到第二个下拉列表中
  function addOption(id,name)
  {
    var studentsList = document.getElementById("students");
    var option = document.createElement("option");
    option.appendChild(document.createTextNode(name));
    studentsList.appendChild(option);
  }
  
    //发送客户端的请求
  function sendRequest(url)
  {
    createXMLHttpRequest();
    XMLHttpReq.open("GET",url,true);
    //指定响应函数
    XMLHttpReq.onreadystatechange = handleResponse;
    //发送请求
    XMLHttpReq.send(null);
  }
  
  //刷新第二个下拉列表
  function refreshList()
  {
   var age = document.getElementById("age").value;
   sendRequest("DynamicList?age="+age);
  }
  </script>
  <body>
    This is my JSP page. <br>
    
     <font size="4"> 查询条件：<br> 年龄：
     <select id="age" onchange="refreshList()">
     <option value="22">22岁</option>
     <option value="23">23岁</option>
     <option value="24">24岁</option>
     </select>
     满足条件的学生：
     <select id="students">
     </select>
 </font>

  </body>
</html>DynamicList（是一个servlet,在servlets包下）：package servlets;import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class DynamicList extends HttpServlet { private ArrayList<Student> students = new ArrayList(); private static class Student {
private int id;
private String name;
private int age;
private String gender;
private String date; public Student(int id, String name, int age, String gender, String date) {
this.id = id;
this.name = name;
this.age = age;
this.date = date;
this.gender = gender;
}
} // 初始化数据集合
public void init() throws ServletException {
students.add(new Student(1, "Marlin", 22, "Gril", "2007-8-5"));
students.add(new Student(2, "Tom", 22, "Gril", "2007-8-5"));
students.add(new Student(3, "Jack", 22, "Gril", "2007-8-5")); students.add(new Student(4, "Mac", 23, "Gril", "2007-8-5"));
students.add(new Student(5, "Marcy", 23, "Gril", "2007-8-5"));
students.add(new Student(6, "Rain", 23, "Gril", "2007-8-5")); students.add(new Student(7, "Luice", 24, "Gril", "2007-8-5"));
students.add(new Student(8, "Jonse", 24, "Gril", "2007-8-5"));
students.add(new Student(9, "Lily", 24, "Gril", "2007-8-5"));
} /**
 * Constructor of the object.
 */
public DynamicList() {
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/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
String output = "";
int age = 0;
if (request.getParameter("age") != null) {
age = Integer.parseInt(request.getParameter("age"));
}
ArrayList<Student> studentList = new ArrayList<Student>();
if (age == 0) {
studentList = students;
} else {
studentList = getStudents(age);
} // 生成响应的文档
if (!studentList.isEmpty()) {
output += "<response>";
for (int i = 0; i < studentList.size(); i++) {
Student stu = (Student) studentList.get(i);
output += "<student>";
output += "<id>" + stu.id + "</id>";
output += "<name>" + stu.name + "</name>";
output += "</student>"; }
output += "</response>";
}
out.println(output);
out.close();
} public ArrayList<Student> getStudents(int age) {
ArrayList<Student> result = new ArrayList<Student>();
if (!students.isEmpty()) {
for (int i = 0; i < students.size(); i++) {
Student student = (Student) students.get(i);
if (student.age == age) {
result.add(student);
}
}
}
return result;
}}

解决方案 »

  1.   


    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>
        <description>This is the description of my J2EE component</description>
        <display-name>This is the display name of my J2EE component</display-name>
        <servlet-name>DynamicList</servlet-name>
        <servlet-class>servlets.DynamicList</servlet-class>
      </servlet>  <servlet-mapping>
        <servlet-name>DynamicList</servlet-name>
        <url-pattern>/DynamicList</url-pattern>
      </servlet-mapping></web-app>
    麻烦各位帮我找下错误……
      

  2.   

    唉,程序员最大的痛苦莫过于ajax调试
    1.那个Dynamic.jsp页面脚本中缺少
    var XMLHttpReq;声明
    2.//把满足条件的学生添加到第二个下拉列表中
      function addOption(id,name)
      你调用的时候写成了appOption(id,name);
    3.在servlet页面的response.setContentType("text/html;charset=UTF-8");
      改成response.setContentType("application/xml;charset=UTF-8");
      

  3.   

    啊,不会吧,
    <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'DynamicList.jsp' starting page</title>
        
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->  </head>
          <script language="javascript">
          var XMLHttpReq;
      function createXMLHttpRequest()
      {
        if(window.XMLHttpRequest)
        {
        //Mozilla浏览器
        XMLHttpReq = new XMLHttpRequest();
        }else
        {//IE浏览器
        if(window.ActiveXObject)
          {
          try{
          XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
          }catch(e){
                   try
                   {
                   XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                   }catch(e)
                      {
                      }
                   }
          }
        }
      }
      
       //处理服务器相应的结果
      function handleResponse()
      {
       
        if(XMLHttpReq.readyState==4)
        { //信息已经成功返回，开始处理信息
          if(XMLHttpReq.status==200)
          {
          
          alert(XMLHttpReq.status);
          
          clearList();
          var out = "";
          var res = XMLHttpReq.responseXML;
          //注意,调试的时候看这几个XMLHttpReq.responseXML返回的是不是object
          alert(XMLHttpReq.responseXML);
          
          var students = res.getElementsByTagName("student");
          // 这个大小是不是等于0,如果等于0那就是servlet的
           // response.setContentType("application/xml");这样设置
          alert(students.length);
          
          for(var i =0;i<students.length;i++)
            {
          var id = students(i).getElementsByTagName("id")[0].firstChild.nodeValue;
          alert(id);
          var name = students(i).getElementsByTagName("name")[0].firstChild.nodeValue;
          alert(name);
          addOption(id,name);
            }
          
          }
        }
      }
      
      //清除下拉列表中的值
      function clearList()
      {
       var studentsList = document.getElementById("students");
       while(studentsList.childNodes.length>0)
       {
       studentsList.removeChild(studentsList.childNodes[0]);
       }
      }
      
      //把满足条件的学生添加到第二个下拉列表中
      function addOption(id,name)
      {
        var studentsList = document.getElementById("students");
        var option = document.createElement("option");
        option.appendChild(document.createTextNode(name));
        studentsList.appendChild(option);
      }
      
        //发送客户端的请求
      function sendRequest(url)
      {
        createXMLHttpRequest();
        XMLHttpReq.open("GET",url,true);
        //指定响应函数
        XMLHttpReq.onreadystatechange = handleResponse;
        //发送请求
        XMLHttpReq.send(null);
      }
      
      //刷新第二个下拉列表
      function refreshList()
      {
       var age = document.getElementById("age").value;
       sendRequest("DynamicList?age="+age);
      }
      </script>
      <body>
        This is my JSP page. <br>
        
                <font size="4"> 查询条件：<br> 年龄：
                <select id="age" onchange="refreshList()">
                <option value="22">22岁</option>
                <option value="23">23岁</option>
                <option value="24">24岁</option>
                </select>
                满足条件的学生：
                <select id="students">
                </select>
     </font>
                
      </body>
    </html>
      

  4.   

    建议你去用phototype框架 很简单！
      

  5.   

    哦,去下一个scd10en.exe,是IE的调试工具(脚本插件)
      

  6.   

         既然上面的大多数兄弟都说调试麻烦，那我建议一个调试工具吧：FireFox下的FireBug。
         据说IE8也有动态脚本调试功能，不过我没装那东西。