一个简单的基于AJAX的二级联动实例

最新推荐文章于 2022-12-04 20:38:52 发布

rowandjj

最新推荐文章于 2022-12-04 20:38:52 发布

阅读量2.5k

点赞数 2

分类专栏： java web 文章标签： ajax javascript 浏览器

本文链接：https://blog.csdn.net/chdjj/article/details/18812423

版权

java web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果：

1.选择省份后，自动加载省份对应的城市。

2.所有省份以及城市的信息保存在xml文件中。

原理：

当页面加载完毕后，XMLHttpRequest对象向一个servlet发出请求，请求省份及城市数据，获取数据后，将数据填充到对应的select标签中。提交表单后，表单也会请求另一个servlet处理该表单，获取城市与省份信息。

下面贴出代码：

1.jsp页面，为方便观看，js文件直接写入jsp页面：

<%@ 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>

获取xml文件信息并返回的servlet：

注：这里使用了dom4j读取一个xml文件（需要导入jar包）,其实也可以用javaI/O,因为这个servlet只用读取文件并不用解析。

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, HttpServletResponse resp)
            throws ServletException, 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, HttpServletResponse resp)
            throws ServletException, 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, HttpServletResponse resp)
            throws ServletException, IOException
    {
        this.doGet(req, resp);
    }
}

rowandjj

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
一个简单的基于AJAX的二级联动实例

效果：1.选择省份后，自动加载省份对应的城市。2.所有省份以及城市的信息保存在xml文件中。原理：当页面加载完毕后，XMLHttpRequest对象向一个servlet发出请求，请求省份及城市数据，获取数据后，将数据填充到对应的select标签中。提交表单后，表单也会请求另一个servlet处理该表单，获取城市与省份信息。下面贴出代码：
复制链接

扫一扫