Ajax+servlet+web.xml Ajax select 下拉菜单 实例 （转）
--- servlet----
package com.ajax;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 AjaxServlet extends HttpServlet {String[][] hebeiArr;String[][] beijingArr;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("ajaxServlet onload ....."); hebeiArr = new String[3][2]; beijingArr = new String[3][2]; String[][] tmpArr = null; hebeiArr[0][0] = "11"; hebeiArr[0][1] = "石家庄"; hebeiArr[1][0] = "12"; hebeiArr[1][1] = "廊坊"; hebeiArr[2][0] = "13"; hebeiArr[2][1] = "秦皇岛"; beijingArr[0][0] = "01"; beijingArr[0][1] = "昌平"; beijingArr[1][0] = "02"; beijingArr[1][1] = "通州"; beijingArr[2][0] = "03"; beijingArr[2][1] = "大兴"; String id = req.getParameter("id"); if(id.equals("hb")){ tmpArr = hebeiArr; } else if(id.equals("bj")){ tmpArr = beijingArr; } StringBuffer sb = new StringBuffer(); sb.append("<root>"); System.out.println(tmpArr.length); for(int i=0; i<tmpArr.length; i++){ sb.append("<city><id>"+tmpArr[i][0]+"</id><name>"+tmpArr[i][1]+"</name></city>"); } sb.append("</root>"); resp.setContentType("text/xml"); resp.setHeader("Cache-Control", "no-cache"); resp.setCharacterEncoding("utf-8"); PrintWriter out = resp.getWriter(); out.print(sb.toString()); System.out.println(sb.toString()); out.close();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp);}}----- jsp-------<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body><form name='frm' method='post' action=''><table border='1' align='center'><tr> <td id='se'> <select onchange='show(this.value)'> <option value='hb'>河北省</option> <option value='bj'>北京市</option> </select> </td> <td id='si'> <select name='city'> <option value='0'>选择</option> </select> </td></tr></table></form></body><script language='javascript'>var xMLHttpReq;function show(val){ if(window.ActiveXObject){ try{ xMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); //IE6.0 } catch(e){ xMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); //IE5.5 这两版本差别不大 } }else if(window.XMLHttpRequest){ xMLHttpReq=new XMLHttpRequest(); } xMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); var url = "servlet/AjaxServlet?id="+val; xMLHttpReq.open("get",url,true); xMLHttpReq.setRequestHeader("Content-Type","text/html;charset=utf-8"); xMLHttpReq.onreadystatechange = proc; xMLHttpReq.send(null);}function proc(){ if(xMLHttpReq.readyState == 4){ if(xMLHttpReq.status == 200){ var root = xMLHttpReq.responseXML; var res = root.getElementsByTagName("city"); //取得 city 标签的数组 var sel = document.getElementById("city"); var selsize = sel.options.length; /* for(var i=selsize-1; i>=0; i--){ //从后往前删除元素 sel.remove(i); } */ for(var i=0; i<selsize; i++){ //删除原有元素 效果与上同 sel.remove(0); } for(var i=0; i<res.length; i++){ var op = document.createElement("option"); op.value = res[i].childNodes[0].text; //要用 .text 数组元素的第1个子元素 op.text = res[i].childNodes[1].text; //数组元素的第2个子元素 sel.add(op); } } }}</script></html>---------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"><welcome-file-list> <welcome-file>index.jsp</welcome-file></welcome-file-list><servlet> <servlet-name>AjaxServlet</servlet-name> <servlet-class>com.ajax.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/servlet/AjaxServlet</url-pattern> </servlet-mapping> </web-app>----------------------