AJAX经典应用之动态加载列表框

最新推荐文章于 2022-02-23 18:53:40 发布

NonShan

最新推荐文章于 2022-02-23 18:53:40 发布

阅读量997

点赞数

分类专栏： java学习文章标签： ajax 动态列表框

本文链接：https://blog.csdn.net/NonShan/article/details/40902335

版权

java学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

动态加载列表框在许多场景中都需要用到。

比如说当用户选择了某几项选项之后，会自动根据用户的选择来动态加载列表框。下面要讲的就是这样一个例子。

注意事项：

增加新的节点需要从下往上依次加进去

dynamicList.html

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic List Demo</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    var xhr ;
    function createXMLHttpRequest()
    {	
    	//ie浏览器
    	if(window.ActiveXObject)
    		{
    			xhr = new ActiveXObject("Microsoft.XMLHttp");
    		}
    	//非ie浏览器
    	else if(window.XMLHttpRequest)
    		{
    			xhr = new XMLHttpRequest();
    		}
    }
    function refreshModelList()
    {
    	var year = document.getElementById("modelYear").value;
    	var make = document.getElementById("make").value;
    	createXMLHttpRequest();
    	xhr.onreadystatechange = callback;
    	var url = "dynamicList?year="+year+"&make="+make+"&timeStamp="+new Date().getTime();
    	xhr.open("GET", url, true);
    	xhr.send(null);
    }
    function callback()
    {   	
    	if(xhr.readyState == 4)
    		{
    		if(xhr.status == 200)
    			{
    				updateList();
    			}
    		}
    }
    function updateList()
    {	
    	clearList();
    	//获得servlet中传送过来的XML中的model
    	var results = xhr.responseXML.getElementsByTagName("model");
    	//获得页面中的id为models对象
    	var models = document.getElementById("models");
    	var option = null;
    	for(var i=0;i<results.length;i++)
    		{	
    			//新建一个元素 
    			option = document.createElement("option");
    			//在这个元素增加孩子节点  textNode
    			option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
    			//将此节点加入到models中
    			models.appendChild(option);
    		}
    	
    }
    
    //清除之前列表框里面的东西
    function clearList()
    {
    	var models = document.getElementById("models");
    	while(models.childNodes[0]!=null)
    		{
    			models.removeChild(models.childNodes[0]);
    		}
    }
    </script>
  </head>
  
  <body>
    <h1>Select Model Year and Make</h1>
    <br/>
    <form action="#">
     <span style = 'font-weight:bold;'>Model Year:</span>
    <select id='modelYear' οnchange="refreshModelList();">
    	<option selected='selected'>Select One</option>
    	<option value = '2006'>2006</option>
    	<option value = '1995'>1995</option>
    	<option value = '1985'>1985</option>
    	<option value = '1970'>1970</option>
    </select>
    <br/>
    <br/>
    <span style='font-weight:bold;'>Make:</span>
    <select id='make' οnchange="refreshModelList();">
    	<option selected='selected'>Select One</option>
    	<option value='Chevrolet'>Chevrolet</option>
    	<option value='Dodge'>Dodge</option>
    	<option value='Pontiac'>Pontiac</option>
    	 </select>
    <br/>
    <br/>
    <span style='font-weight:bold;'>Models:</span>
    <br/>
    <select id='models' size='6' style='width:300px;'>
    
    </select>
    </form>   
  </body>
</html>

DynamicServlet.java

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DynamicListServlet extends HttpServlet {
	private ArrayList<Car> cars = new ArrayList<Car>();
	
	public DynamicListServlet()
	{
		initCars();
	}
	
	
	/**
	 * 初始化cars，简单模拟。
	 * */
	public void initCars()
	{
			cars.add(new Car(2006, "Dodge", "Charger"));
			cars.add(new Car(2006, "Dodge", "Magnum"));
	        cars.add(new Car(2006, "Dodge", "Ram"));
	        cars.add(new Car(2006, "Dodge", "Viper"));
	        cars.add(new Car(1995, "Dodge", "Avenger"));
	        cars.add(new Car(1995, "Dodge", "Intrepid"));
	        cars.add(new Car(1995, "Dodge", "Neon"));
	        cars.add(new Car(1995, "Dodge", "Spirit"));
	        cars.add(new Car(1985, "Dodge", "Aries"));
	        cars.add(new Car(1985, "Dodge", "Daytona"));
	        cars.add(new Car(1985, "Dodge", "Diplomat"));
	        cars.add(new Car(1985, "Dodge", "Omni"));
	        cars.add(new Car(1970, "Dodge", "Challenger"));
	        cars.add(new Car(1970, "Dodge", "Charger"));
	        cars.add(new Car(1970, "Dodge", "Coronet"));
	        cars.add(new Car(1970, "Dodge", "Dart"));

	        cars.add(new Car(2006, "Chevrolet", "Colorado"));
	        cars.add(new Car(2006, "Chevrolet", "Corvette"));
	        cars.add(new Car(2006, "Chevrolet", "Equinox"));
	        cars.add(new Car(2006, "Chevrolet", "Monte Carlo"));
	        cars.add(new Car(1995, "Chevrolet", "Beretta"));
	        cars.add(new Car(1995, "Chevrolet", "Camaro"));
	        cars.add(new Car(1995, "Chevrolet", "Cavalier"));
	        cars.add(new Car(1995, "Chevrolet", "Lumina"));
	        cars.add(new Car(1985, "Chevrolet", "Cavalier"));
	        cars.add(new Car(1985, "Chevrolet", "Chevette"));
	        cars.add(new Car(1985, "Chevrolet", "Celebrity"));
	        cars.add(new Car(1985, "Chevrolet", "Citation II"));
	        cars.add(new Car(1970, "Chevrolet", "Bel Air"));
	        cars.add(new Car(1970, "Chevrolet", "Caprice"));
	        cars.add(new Car(1970, "Chevrolet", "Chevelle"));
	        cars.add(new Car(1970, "Chevrolet", "Monte Carlo"));

	        cars.add(new Car(2006, "Pontiac", "G6"));
	        cars.add(new Car(2006, "Pontiac", "Grand Prix"));
	        cars.add(new Car(2006, "Pontiac", "Solstice"));
	        cars.add(new Car(2006, "Pontiac", "Vibe"));
	        cars.add(new Car(1995, "Pontiac", "Bonneville"));
	        cars.add(new Car(1995, "Pontiac", "Grand Am"));
	        cars.add(new Car(1995, "Pontiac", "Grand Prix"));
	        cars.add(new Car(1995, "Pontiac", "Firebird"));
	        cars.add(new Car(1985, "Pontiac", "6000"));
	        cars.add(new Car(1985, "Pontiac", "Fiero"));
	        cars.add(new Car(1985, "Pontiac", "Grand Prix"));
	        cars.add(new Car(1985, "Pontiac", "Parisienne"));
	        cars.add(new Car(1970, "Pontiac", "Catalina"));
	        cars.add(new Car(1970, "Pontiac", "GTO"));
	        cars.add(new Car(1970, "Pontiac", "LeMans"));
	        cars.add(new Car(1970, "Pontiac", "Tempest"));
	}
	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		Car car ;
		//拿到request请求中的参数
		String yearString = request.getParameter("year");
		int year = Integer.parseInt(yearString);
		String make = request.getParameter("make");
		StringBuffer results = new StringBuffer();
		//以XML的格式传送过去
		results.append("<models>");
		//使用迭代器，来遍历cars中的所有值
		for(Iterator<Car> carIterator = cars.iterator();carIterator.hasNext();)
		{
			car = carIterator.next();
			if(car.getModelYear() == year){
				if(car.getMake().equals(make)) //用car.getMake() == make则无法进入
				{	
					results.append("<model>");
					String model = car.getModels();
					results.append(model);
					results.append("</model>");
				}
			}
		}
		results.append("</models>");
		response.setContentType("text/xml");
		response.getWriter().println(results);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}