1.选择省份后,自动加载省份对应的城市。
2.所有省份以及城市的信息保存在xml文件中。
原理:
当页面加载完毕后,XMLHttpRequest对象向一个servlet发出请求,请求省份及城市数据,获取数据后,将数据填充到对应的select标签中。提交表单后,表单也会请求另一个servlet处理该表单,获取城市与省份信息。
下面贴出代码:
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>My JSP 'responseXML.jsp' starting page</title>
- <script type="text/javascript">
- window.onload = function() {
- var data = false;
- var xhr = createXmlHttpRequest();
- //请求服务端的一个servlet,该servlet可以读取xml文件,并将结果作为字符串返回。
- xhr.open("get","${pageContext.request.contextPath}/servlet/ResponseXMLServlet?time="+new Date().getTime());
- xhr.send(null);//由于是get请求所以发送数据为空
- xhr.onreadystatechange = function()
- {
- if(xhr.readyState == 4)
- {
- if(xhr.status == 200 || xhr.status == 304)
- {
- var xmlData = xhr.responseXML;//读取服务端返回的数据,是一个Object对象类型
- //获取xmlData对象中所有的省份并添加到对应select节点里
- var provinces = xmlData.getElementsByTagName("province");
- for(var i = 0; i < provinces.length; i++)
- {
- //alert(provinces[i].getAttribute("name"));//取出xml文件中每个province节点的name属性值
- var optionElement = document.createElement("option");//创建option节点
- optionElement.setAttribute("value",provinces[i].getAttribute("name"));//设置option节点的value属性值
- optionElement.innerText = provinces[i].getAttribute("name");//设置option标签的内部文本
- document.getElementById("province").appendChild(optionElement);//加到select节点下
- }
- data = xmlData;//将服务端返回的数据赋值给全局变量data
- }
- }
- }
- document.getElementById("province").onchange = function()//为选择省份的select标签添加事件
- {
- //获取当前选择的省份
- var province = document.getElementById("province").value;
- //从xml数据中获取该省份下城市
- var provinceElements = data.getElementsByTagName("province");
- for(var i = 0; i < provinceElements.length; i++)
- {
- if(provinceElements[i].getAttribute("name") == province)
- {
- var cityElements = provinceElements[i].getElementsByTagName("city");
- clearCitys();
- for(var j = 0; j < cityElements.length;j++)
- {
- var optionElement = document.createElement("option");//生成option节点
- optionElement.setAttribute("value",cityElements[j].firstChild.nodeValue);
- optionElement.innerText = cityElements[j].firstChild.nodeValue;
- document.getElementById("city").appendChild(optionElement);
- }
- }
- }
- }
- }
- function clearCitys(){ //清空城市信息
- var city = document.getElementById('city');
- city.options.length = 0;
- city.options[0] = new Option('请选择城市...','null_city');
- }
- function createXmlHttpRequest() {//创建XMLHttpRequest对象
- var xmlHttp;
- try { //Firefox,Opera 8.0+,Safari
- xmlHttp = new XMLHttpRequest();
- } catch (e) {
- try { //Internet Explorer
- xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (e) {
- try {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e) {
- }
- }
- }
- return xmlHttp;
- }
- </script>
- </head>
- <body>
- <form action="${pageContext.request.contextPath }/servlet/HandFormServlet" method="post">
- 省份
- <select name="province" id="province">
- <option value="null_province">
- 请选择...
- </option>
- </select>
- 城市
- <select name="city" id="city">
- <option value="null_city">
- 请选择...
- </option>
- </select>
- <br/>
- <input type="submit" value="提交"/>
- </form>
- </body>
- </html>
- package cn.edu.chd.web;
- import java.io.File;
- 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;
- import org.dom4j.Document;
- import org.dom4j.DocumentException;
- import org.dom4j.io.SAXReader;
- public class ResponseXMLServlet extends HttpServlet
- {
- @Override
- protected void doGet(HttpServletRequest req,HttpServletResponse resp)
- throws ServletException,IOException
- {
- resp.setCharacterEncoding("utf-8");
- // 告诉浏览器接收的是xml数据
- resp.setContentType("application/xml;charset=utf-8");
- PrintWriter writer = resp.getWriter();
- // 获取代表省份和城市信息的xml文件
- String realPath = this.getServletContext().getRealPath("/data/data.xml");
- SAXReader reader = null;
- try
- {
- reader = new SAXReader();
- Document doc = reader.read(new File(realPath));
- writer.println(doc.asXML());//将文档对象作为字符串返回
- } catch (DocumentException e)
- {
- e.printStackTrace();
- }
- }
- @Override
- protected void doPost(HttpServletRequest req,IOException
- {
- this.doGet(req,resp);
- }
- }
保存省份与城市的xml:
- <?xml version="1.0" encoding="UTF-8"?>
- <china>
- <province name="吉林">
- <city>长春</city>
- <city>吉林市</city>
- <city>通化</city>
- <city>四平</city>
- </province>
- <province name="安徽">
- <city>安庆</city>
- <city>芜湖</city>
- <city>合肥</city>
- <city>六安</city>
- </province>
- <province name="江苏">
- <city>南京</city>
- <city>无锡</city>
- <city>镇江</city>
- <city>连云港</city>
- </province>
- <province name="山东">
- <city>青岛</city>
- <city>烟台</city>
- <city>济南</city>
- <city>威海</city>
- </province>
- </china>
处理表单的servlet:
注:为了方便,直接打印到控制台。
- package cn.edu.chd.web;
- import java.io.IOException;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- public class HandFormServlet extends HttpServlet
- {
- @Override
- protected void doGet(HttpServletRequest req,IOException
- {
- req.setCharacterEncoding("utf-8");
- resp.setCharacterEncoding("utf-8");
- resp.setContentType("text/html;charset=utf-8");
- String province = req.getParameter("province");
- String city = req.getParameter("city");
- System.out.println("province = "+province+",city = "+city);
- }
- @Override
- protected void doPost(HttpServletRequest req,resp);
- }
- }