前面做了一个ajax的小demo，今天看一个动态更新下拉列表，或者也叫级联更新下拉列表，这个也是利用ajax的异步调用去后台实现数据请求。然后回到前台完毕下拉列表数据的更新，以增强web应用的交互性。

后台servlet

package com.ajax;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class CreateXML

 */

@WebServlet("/CreateXML")

public class CreateXML extends HttpServlet {

	private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public CreateXML() {

        super();

        // TODO Auto-generated constructor stub

    }

	/**

	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		doPost(request, response);

	}

	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/xml");

		response.setCharacterEncoding("UTF-8");

		String selected = request.getParameter("selected");

		PrintWriter out = response.getWriter();

		out.println("<response>");

		//以下分别为两个省份创建地市

		if (selected.equals("1")){//假设选择的是“湖南省”

			out.println("<city>");

			out.println("<cityname>长沙</cityname>");

			out.println("<cityvalue>1</cityvalue>");

			out.println("</city>");

			out.println("<city>");

			out.println("<cityname>娄底</cityname>");

			out.println("<cityvalue>2</cityvalue>");

			out.println("</city>");

			out.println("<city>");

			out.println("<cityname>常德</cityname>");

			out.println("<cityvalue>3</cityvalue>");

			out.println("</city>");

		}else{//假设选择的是“广东省”

			out.println("<city>");

			out.println("<cityname>广州</cityname>");

			out.println("<cityvalue>1</cityvalue>");

			out.println("</city>");

			out.println("<city>");

			out.println("<cityname>深圳</cityname>");

			out.println("<cityvalue>2</cityvalue>");

			out.println("</city>");

			out.println("<city>");

			out.println("<cityname>佛山</cityname>");

			out.println("<cityvalue>3</cityvalue>");

			out.println("</city>");

		}

		out.println("</response>");

		out.flush();

		out.close();

	}

}

我们推送到前台的数据为<response><city><cityname>长沙</cityname><cityvalue>1</cityvalue></city></response> xml格式。

前台页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

	"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>AjaxDemo</title>

</head>

<script language="javascript">

	// 定义一个变量用于存放XMLHttpRequest对象

	var xmlHttp; 

	// 该函数用于创建一个XMLHttpRequest对象

	function createXMLHttpRequest() {

		if (window.ActiveXObject) {

			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

		}

		else if (window.XMLHttpRequest) {

			xmlHttp = new XMLHttpRequest();

		}

	}

	// 这是响应省份列表的onChange事件的处理方法

	function updateSelect(){

		var selected = document.getElementById("slt1").value;//得到省份列表的当前选值

		//  document.getElementById("slt1").selectedIndex 获得选中项索引值（数字）

		//  document.getElementById("slt1").value 获得选中项的value值

		// 创建一个XMLHttpRequest对象

		createXMLHttpRequest();

		// 将状态触发器绑定到一个函数

		xmlHttp.onreadystatechange = processor;

		// 通过GET方法向指定的URL建立server的调用

		xmlHttp.open("GET", "CreateXML?

selected="+selected);

		// 发送请求

		xmlHttp.send(null);

	}

	// 处理从server返回的XML文档并更新地市下拉列表

	function processor() {

		// 定义一个变量用于存放从server返回的响应结果

		var result;

		// 假设响应完毕 而且 返回成功

		if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//

			// 取出server返回的XML文档的全部city标签的子节点

			result = xmlHttp.responseXML.getElementsByTagName("city");

			// 先清除地市列表的现有内容

			while (document.getElementById("slt2").options.length>0){

				document.getElementById("slt2").removeChild(document.getElementById("slt2").childNodes[0]);

			}

			// 解析XML中的数据并更新地市列表

			for(var i=0;i<result.length;i++){

				var option = document.createElement("OPTION");

				option.text = result[i].getElementsByTagName("cityname")[0].innerHTML;//这就是取出<cityname>中的值

				option.value = result[i].getElementsByTagName("cityvalue")[0].innerHTM;//这就是取出<cityvalue>中的值

				document.getElementById("slt2").options.add(option);//为地市列表中加入选项

			}

		}

	}

</script>

<body>

	<br><br>

	<center>

		<form name="form1" action="#" method="POST">

	    	请选择省份：

	    	<select id="slt1" onChange="updateSelect()">

	    		<option value="1">湖南省</option>

	    		<option value="2">广东省</option>

	    	</select>

	    	地市：

	    	<select id="slt2">

	    		<option value="">请选择地市</option>

	    	</select>

	    </form>

    </center>

</body>

</html>

上面的程序，初始化页面效果为

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFnaTEyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

这让初始化的省份无法看到自己的地市，不够完美，怎么处理一下呢？

在页面载入完毕后，让程序先去后台请求一下当前的省份的地市。页面载入完毕。load事件，给body绑定load方法就可以。

我们的处理方法为

<body onload="updateSelect()">

这样，页面载入完毕时，便能够看到页面上面的广东省的地市。

ajax动态更新下拉列表的更多相关文章

  1. Jquery ajax动态更新下拉列表的内容

    $("#book_id").change(function(){ $book_id=$(this).children('option:selected').val(); //ale ...

  2. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  3. js动态生成下拉列表

    经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: function getNameList(){ //如果 ...

  4. highChart数据动态更新

    highChart官网上通过ajax加载数据的例子 上面是第一次生成图表的时候使用 我想动态更新,在已经生成的图表上动态更新 chartBS.series[0].setData(sugarListDa ...

  5. HtmlUnit爬取Ajax动态生成的页面内容

    HtmlUnit说白了就是一个浏览器,这个浏览器是用Java写的无界面的浏览器,正因为其没有界面,因此执行的速度还是可以滴. HtmlUnit提供了一系列的API,这些API可以干的功能比较多,如表单 ...

  6. 爬虫——爬取Ajax动态加载网页

    常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 ...

  7. Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页

    1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...

  8. 分别在javascript和JSP中动态设置下拉列表默认值

    一.JavaScript中动态设置select标签中<option>选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 ...

  9. echarts在.Net中使用实例(二) 使用ajax动态加载数据

    通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...

随机推荐

  1. kali 2.0 linux中的Nmap的操作系统扫描功能

    不多说,直接上干货! 可以使用-O选项,让Nmap对目标的操作系统进行识别. msf > nmap -O 202.193.58.13 [*] exec: nmap -O 202.193.58.1 ...

  2. Android Gallery和ImageSwitcher同步自动(滚动)播放图片库

    本文主要内容是如何让Gallery和ImageSwitcher控件能够同步自动播放图片集 ,看起来较难,然而,实现的方法非常简单, 请跟我慢慢来.总的来说,本文要实现的效果如下图:(截图效果不怎么好) ...

  3. js确认框confirm()用法实例详解

    先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. ? 1 2 3 4 5 6 7 8 ...

  4. java 多线程——join（）方法

    在java语言中,join()方法的作用是让调用该方法的线程在执行完run()方法后,再执行join 方法后面的代码. 简单点说就是,将两个线程合并,用于实现同步的功能. 具体而言:可以通过线程A的j ...

  5. php重新编译，gd扩展支持jpeg文件

    晚上写东西的时候,报了一个错误: Call to undefined function imagecreatefromjpeg() 没有开启 jpeg 支持?原来是默认安装的 gd 扩展默认不支持 j ...

  6. Tomcat IO阻塞异常

    tomcat的maxThreads.acceptCount(最大线程数.最大排队数) tomcat 的Connector配置如下 <Connector port="8080" ...

  7. 学习参考《高性能MySQL(第3版)》中文PDF+英文PDF

    学习mysql数据库时推荐看看mysql 领域的经典之作<高性能mysql(第3版)>,共分为16 章和6 个附录,内容涵盖mysql 架构和历史,基准测试和性能剖析,数据库软硬件性能优化 ...

  8. 洛谷 P3068 [USACO13JAN]派对邀请函Party Invitations

    P3068 [USACO13JAN]派对邀请函Party Invitations 题目描述 Farmer John is throwing a party and wants to invite so ...

  9. ArcGIS api for javascript——动态创建图层列表

    描述 本例循环地图服务里的所有图层并增加每个图层到一个带checkbox的列表,checkbox能设置图层的显示或隐藏.动态创建列表的优势是所有的图层都会包含在列表中,即使服务器管理员删除或增加了图层 ...

  10. Shell脚本中替换字符串等操作

    在做shell批处理程序时候,常常会涉及到字符串相关操作. 有非常多命令语句.如:awk,sed都能够做字符串各种操作. 事实上shell内置一系列操作符号.能够达到类似效果,大家知道,使用内部操作符 ...