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[i].firstChild.nodeValue);
option.appendChild(document.createTextNode(result[i].firstChild.nodeValue));
model.appendChild(option);
}
}
function clearModelList(model) {
var option = model.getElementsByTagName("option")
/*
if (option[0].hasChildNodes) {
alert(option[0].childNodes[0].nodeValue);
option[0].removeChild(option[0].childNodes[0]);
}
*/
if (option.length>0) {
model.removeChild(option[0]);
}
}
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[0]) 括号里为文本对象
6.获得某个标签的文本 父节点对象.childNodes[0].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