ajax动态更新下拉列表

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前面做了一个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>