AJAX經典應用之動態載入列表框

阿新 • • 發佈：2019-01-15

動態載入列表框在許多場景中都需要用到。

比如說當用戶選擇了某幾項選項之後，會自動根據使用者的選擇來動態載入列表框。下面要講的就是這樣一個例子。

注意事項：

增加新的節點需要從下往上依次加進去

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' onchange="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' onchange="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);
	}

}

AJAX經典應用之動態載入列表框

動態載入列表框在許多場景中都需要用到。比如說當用戶選擇了某幾項選項之後，會自動根據使用者的選擇來動態載入列表框。下面要講的就是這樣一個例子。注意事項：增加新的節點需要從下往上依次加進去 dynamicList.html <!DOCTYPE html> &

Ajax動態載入列表框

1.dynamicLists.html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Excel Power Query經典應用之二維表轉一維表

office excel power 技能經典 Excel Power Query經典應用之二維表轉一維表將一個二維表格轉為一維表格，是我們經常要做的事，目的是為了將數據做更好的分析。但Excel普通的轉換的方式卻比較麻煩。不過不用擔心。利用Excel的Power Quer

java反射機制應用之動態代理

代理類過多 size bject interface 並且編譯期代理抽象 1.靜態代理類和動態代理類區別靜態代理：要求被代理類和代理類同時實現相應的一套接口；通過代理類的對象調用重寫接口的方法時，實際上執行的是被代理類的同樣的方法的調用。動態代理：在程序運

關於apk加殼之動態載入dex檔案

由於自己之前做了一個關於手機令牌的APK軟體，在實現的過程中儘管使用了native so進行一定的邏輯演算法保護，但是在自己逆向破解的過程中發現我的手機令牌關鍵資料能夠“輕易地”暴露出來，所以我就想進一步的對其進行加固。於是，我使用的網上常用的梆梆加固、愛加密和阿里的聚安全應用來對我的apk進行一個

bootStrap:動態載入列表

$( function() { //載入資料 $.ajax({ url : "settings/dictionary/type/queryAllType.d

docker高階應用之動態擴充套件容器空間大小

先轉載記錄一下，尚未驗證，有空看一下 ------------------------------------------------------------------------------------------------------------ do

Android中外掛開發篇之----動態載入Activity 免安裝執行程式

一、前言又到週末了，時間過的很快，今天我們來看一下Android中外掛開發篇的最後一篇文章的內容：動態載入Activity(免安裝執行程式)，在上一篇文章中說道了，如何動態載入資源(應用換膚原理解析)，沒看過的同學，可以轉戰：當然，今天說道的內容還這這篇文章有關係。關於動態載入

javaEE (四）javaweb_JavaScript (7) 動態載入列表

Date：2018/11/17 效果如圖，點選按鈕就會增加一個hah，主要是測試建立節點和嵌入節點的功能，具體例子在（6）中有體現：原始碼： <!-- 1、document.createTextNode 建立文字節點 2、document.crea

HTML之動態載入表格資料

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>

iOS經典講解之UIWebView載入PDF不顯示電子簽章解決方案

一、對於iOS 12系統可直接使用WKWebView 載入pdf url 即可，便會顯示電子簽章，WKWebView是從 iOS 8.0 和 OS X 10.10 開始的；二、對於iOS 12以下版本，有其他的解決方案： iOS版本 < 12的情況可以使用PDF.

Python在運維工作中的經典應用之ansible

1.安裝ansible wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.ali

Mustache動態載入選擇框

一、簡單示例程式碼： 1 function show(t) { 2 $("#content").html(t); 3 } 4 5 var vie

Winphone開發之動態載入XAML

XAML是可以動態載入的，這裡所說的動態載入就是說寫好了一個靜態XAML，然後在執行時用C#載入到相應的地方去。動態載入XAML注意的幾點： 1）待載入的XAML只能有一個根節點，也就是說不能有多個

拆輪子之動態載入DynamicLoadApk

動態載入是什麼應用在執行的時候通過載入一些本地不存在的可執行檔案實現一些特定的功能，Android中動態載入的核心思想是動態呼叫外部的Dex檔案，極端的情況下，Android APK自身帶有的Dex檔案只是一

經典演算法之動態規劃(一)：入門級動態規劃

終於要寫高大上的動態規劃啦~~雖然面對高難度的題目還是沒底，但是簡單的可用一維陣列記錄各子問題的解的入門級動態規劃是已經OK的啦~下面以一個鋼條切割的問題為例來講述動態規劃。假設一公司進了一批長為10的鋼條，打算切割然後去賣，各種長度的鋼條的價格如下表： 1 2 3 4

陣列經典應用之—楊輝三角

/*** 經典楊輝三角* 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 * @author 378375*///1.初始化10行陣列int[][] yangHui = new int[

PHP擴充套件開發之動態載入so模組與靜態重編譯PHP（上）

動態載入so模組：利用ext_skel工具編譯生成so模組，修改php.ini檔案，動態載入即可靜態編譯：將編寫的模組靜態編譯到PHP，需要重新編譯PHP 假設要編寫一個my_dynamic擴充套件，呼叫my_dynamic函式後輸出字串“The Best

Android外掛化學習之路（一）之動態載入綜述

前段時間，公司專案完成了外掛化的開發，自己也因此學習了很多Android外掛化的知識，於是想把這些內容記錄下來，本次帶來Android外掛化的第一篇：動態載入綜述背景知識 1.什麼是動態載入？動態載入技術應由以下幾個部分組成： 1) 應用在執行

freemark動態載入列表資料

1.ftl頁面中 <table class="table table-striped table-hover table-bordered" name="record" id="editable-sample"> </table> fun

AJAX經典應用之動態載入列表框

相關推薦