ajax 用一个下拉框改变另一个下拉框
index.jsp<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%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%>"> <script language="javascript" src="ajaxUpdateSelect/updateList.js"> </script> <title>My JSP 'index.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> <body><form action="#"> <select id="year" onchange="refleshList()"> <option value="">年份</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> </select> <select id="model"> <option value="ss">车型</option> </select> </form></body></html>
updatelist.js
var xmlHttp;function refleshList(){ var url =createUrl(); alert(url);createXMLHttpRequest(); xmlHttp.open("GET",url); xmlHttp.onreadystatechange=updateSel;xmlHttp.send(null);}function createUrl(){ var year = document.getElementById("year").value;var url = "refleshSelect?year="+year; return url;}function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } }function updateSel() {if (xmlHttp.readyState==4) {alert("xmlHttp.status="+xmlHttp.status);if (xmlHttp.status==200) {updateModelsList();}}}function updateModelsList(){var model = document.getElementById("model");clearModelList(model);var option = document.createElement("option");var result = xmlHttp.responseXML.getElementsByTagName("model");for (var i=0; i<result.length;i++) {alert(result.firstChild.nodeValue);option.appendChild(document.createTextNode(result.firstChild.nodeValue));model.appendChild(option);}}function clearModelList(model) {var option = model.getElementsByTagName("option")/*if (option.hasChildNodes) {alert(option.childNodes.nodeValue);option.removeChild(option.childNodes);}*/if (option.length>0) {model.removeChild(option);}}
UdateSelect.java
package ajaxUdateSelect;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 UdateSelect extends HttpServlet {/** * 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/html");//System.out.println(request.getParameter("year"));/*String model = "<model>dddd</model>" +"<model>eeee</model>"+ "<model>ffff</model>"+ "<model>jjjj</model>";*/ String year = request.getParameter("year"); response.setContentType("text/xml"); PrintWriter out = response.getWriter();out.write("<?xml version=\"1.0\" encoding=\"utf-8\" ?>"); if (year!=null && year.equals("2001")) { out.write("<model>");out.write("dddd");out.write("</model>"); } if (year!=null && year.equals("2002")) { out.write("<model>");out.write("eeee");out.write("</model>"); } if (year!=null && year.equals("2003")) { out.write("<model>");out.write("ffff");out.write("</model>"); }}/** * 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");PrintWriter out = response.getWriter();out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");out.println("<HTML>");out.println("<HEAD><TITLE>A Servlet</TITLE></HEAD>");out.println("<BODY>");out.print(" This is ");out.print(this.getClass());out.println(", using the POST method");out.println("</BODY>");out.println("</HTML>");out.flush();out.close();}/** * Initialization of the servlet. <br> * * @throws ServletException if an error occure */public void init() throws ServletException {// Put your code here}}说明：
1. 省略web.xml
2. <script language="javascript" src="delete/updateList.js"></script>千万不要写为
<script language="javascript" src="delete/updateList.js"/>,这是错误的
3. 注意请求的servlet的路径，要知道它的相对的路径是什么，一般已包含它的页面所设置的相对路径为相对路径
如：上面的相对路径为 basePath
4.删除掉某个节点，很简单，只要获得这个节点的对象然后用父节点的方法removeChild(节点对象) 就行了
5.删除文本节点，调用的api不同，父节点对象.removeChild(父节点对象.childNodes) 括号里为文本对象
6.获得某个标签的文本 父节点对象.childNodes.nodeValue
7.创建一个某个标签的子标签，先创建标签，创建文本节点，接着吧文本节点添加到标签，标签再添加到其父标签，如果
只是.创建一个标签，先创建标签，创建文本节点，接着吧文本节点添加到标签
如：var a =document.createElement(String 标签名字); //创建一个标签
var text = document.createTextNode（String）//创建一个文本标签(标签之间的内容)
a.appendChild(text);
8. 在sevlet上输出xml
如上：不过要注意输出的格式
out.write("<model>dddd</model>" ); //这样输出是错误的
要这样输出
out.write("<model>");
out.write("dddd");
out.write("</model>");
刚开始不知道，搞了N久，狂汗!
实例：http://localhost:8088/jspAndServlet/ajaxUpdateSelect/index.jsp
页:
[1]