ajax 用一个下拉框改变另一个下拉框

最新推荐文章于 2021-08-06 19:19:10 发布

iteye_3872

最新推荐文章于 2021-08-06 19:19:10 发布

阅读量318

点赞数

分类专栏： javascript 文章标签： Ajax Servlet JavaScript JSP CSS ViewUI

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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" οnchange="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>千万不要写为

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

iteye_3872

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 用一个下拉框改变另一个下拉框

index.jsp&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+&quot
复制链接

扫一扫