二级联动：JSON和XML实现

方式一、返回XML

Servlet代码：
package aq.wgc.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.thoughtworks.xstream.XStream;

import aq.wgc.entity.City;
import aq.wgc.entity.Province;

/**
* 二级联动，xml做法
*
* @author kellen
*
*/
public class Ajax7Servlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置响应的数据格式
response.setContentType(“text/xml;charset=utf-8”);
/**
* 为了方便不连接数据库，自定义一些数据
*/
// 创建一个List对象，用于存储Province对象
List pros = new ArrayList();
/**
* 封装省份信息和城市信息
*/
// 创建封装城市的集合
List cs1 = new ArrayList();
City c1 = new City();
c1.setName(“安庆”);
City c2 = new City();
c2.setName(“合肥”);
City c3 = new City();
c3.setName(“芜湖”);
cs1.add(c1);
cs1.add(c2);
cs1.add(c3);
Province p1 = new Province();
p1.setName(“安徽”);
p1.setCitys(cs1);

    // 创建封装城市的集合
    List<City> cs2 = new ArrayList<City>();
    City c4 = new City();
    c4.setName("湘潭");
    City c5 = new City();
    c5.setName("常德");
    City c6 = new City();
    c6.setName("长沙");
    cs2.add(c4);
    cs2.add(c5);
    cs2.add(c6);
    Province p2 = new Province();
    p2.setName("湖南");
    p2.setCitys(cs2);
    //将两个省份放入到List集合中
    pros.add(p1);
    pros.add(p2);

    /**
     * 将集合转换为XML
     */
    XStream xs=new XStream();
    //使注解生效
    xs.autodetectAnnotations(true);
    //更改集合名
    xs.alias("province_list", List.class);
    String xml = xs.toXML(pros);
    //System.out.println(xml);
    //响应给jsp页面
    PrintWriter out = response.getWriter();
    out.write(xml);
    out.flush();
    out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
}}

JSP代码：
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax案例_省市二级联动(返回xml)</title>
</head>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/util.js"></script>
<script type="text/javascript">
    //设置全局变量,因为多个函数要用到
    var proList;
    window.onload = function() {
        var province = document.getElementById("pro");
        //注册改变事件
        //1，得到XMLHttpRequest对象
        var xmlhttp = getXmlHttpRequest();
        //2,注册回调函数
        xmlhttp.onreadystatechange = function() {
            //5,处理回调函数
            /*思路：
             *  1,得到xml对象
                2,得到省份数据
             *  3，将省份数据赋值到select标签中
             */
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var xml = xmlhttp.responseXML;
                //得到所有省份数据
                proList = xml.getElementsByTagName("province");
                for (var i = 0; i < proList.length; i++) {
                    //获取省份的第一个标签，也就是省份名的标签
                    var nameEle = proList[i].getElementsByTagName("name")[0];
                    /* 得到标签体的内容 */
                    //var proName=nameEle.innerHTML;//这种写法IE不支持
                    //所以用nameEle的节点得到
                    var textNode=nameEle.firstChild;
                    //得到节点值
                    var proName=textNode.nodeValue;
                    //将省份名设置到select标签中
                    var option=document.createElement("option");
                    //设置属性内容
                    option.textContent=proName;
                    //添加
                    //A特有方法：province.add(option);
                    //B通用方法
                    province.appendChild(option)
                }
            }

        }
        //3,调用open方法,设置请求的提交的方式和url
        xmlhttp.open("GET", "${pageContext.request.contextPath}/Ajax7Servlet");
        //4,调用send方法，发送请求
        xmlhttp.send(null);


        //给省份注册onchange事件，用于给出省份改变相应的城市作出改变
        province.onchange=function(){
            //得到选中的省份的名字
            var selName=province.value;
            //得到城市下拉框对象
            var city=document.getElementById("c");
            //每次改变之后要将城市下拉框初始化
            city.innerHTML="<option>---请选择城市---</option>";
            for (var i = 0; i < proList.length; i++) {
                //获取省份的第一个标签，也就是省份名的标签
                var nameEle = proList[i].getElementsByTagName("name")[0];
                //得到省份名
                var proName=nameEle.firstChild.nodeValue;
                if(selName==proName){
                    //得到省份下面的城市
                    var cityList=proList[i].getElementsByTagName("city");
                    //遍历城市
                    for(var j=0;j<cityList.length;j++){
                        //得到每个城市的城市名
                        var cityName=cityList[j].getElementsByTagName("name")[0].firstChild.nodeValue;
                        //将省对应的城市添加到城市下拉框中
                        var option=document.createElement("option");
                        //设置属性内容
                        option.textContent=cityName;
                        city.appendChild(option);
                    }
                }
            }
        }
    }
</script>
<body>
    <select name="province" id="pro" >
        <option>---请选择省份---</option>
    </select>
    <select name="city" id="c">
        <option>---请选择城市---</option>
    </select>
</body>
</html>

方式二、返回JSON
Servlet代码

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.thoughtworks.xstream.XStream;

import aq.wgc.entity.City;
import aq.wgc.entity.Province;
import net.sf.json.JSONArray;

/**
* 二级联动，JSON做法,
*
* @author kellen
*
*/
public class Ajax8Servlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置响应的数据格式
response.setContentType(“text/xml;charset=utf-8”);
/**
* 为了方便不连接数据库，自定义一些数据
*/
// 创建一个List对象，用于存储Province对象
List pros = new ArrayList();
/**
* 封装省份信息和城市信息
*/
// 创建封装城市的集合
List cs1 = new ArrayList();
City c1 = new City();
c1.setName(“安庆”);
City c2 = new City();
c2.setName(“合肥”);
City c3 = new City();
c3.setName(“芜湖”);
cs1.add(c1);
cs1.add(c2);
cs1.add(c3);
Province p1 = new Province();
p1.setName(“安徽”);
p1.setCitys(cs1);

    // 创建封装城市的集合
    List<City> cs2 = new ArrayList<City>();
    City c4 = new City();
    c4.setName("湘潭");
    City c5 = new City();
    c5.setName("常德");
    City c6 = new City();
    c6.setName("长沙");
    cs2.add(c4);
    cs2.add(c5);
    cs2.add(c6);
    Province p2 = new Province();
    p2.setName("湖南");
    p2.setCitys(cs2);
    //将两个省份放入到List集合中
    pros.add(p1);
    pros.add(p2);

    /**
     * 将集合转换为JSON对象
     */
    String proList = JSONArray.fromObject(pros).toString();
    System.out.println(proList);
    PrintWriter out = response.getWriter();
    out.write(proList);
    out.flush();
    out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
}}

JSP代码

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax案例_省市二级联动(返回JSON)</title>
</head>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/util.js"></script>
<script type="text/javascript">
    //设置全局变量,因为多个函数要用到
    var JSON;
    window.onload = function() {
        var province = document.getElementById("pro");
        //注册改变事件
        //1，得到XMLHttpRequest对象
        var xmlhttp = getXmlHttpRequest();
        //2,注册回调函数
        xmlhttp.onreadystatechange = function() {
            //5,处理回调函数
            /*思路：
             *  1,得到xml对象
                2,得到省份数据
             *  3，将省份数据赋值到select标签中
             */
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //得到省份列表
                JSON=eval("("+xmlhttp.responseText+")");
                //得到所有省份数据
                for (var i = 0; i < JSON.length; i++) {
                    //获取省份名
                    var proName = JSON[i].name;
                    //将省份名设置到select标签中
                    var option=document.createElement("option");
                    //设置属性内容
                    option.textContent=proName;
                    //添加
                    //A特有方法：province.add(option);
                    //B通用方法
                    province.appendChild(option)
                }
            }

        }
        //3,调用open方法,设置请求的提交的方式和url
        xmlhttp.open("GET", "${pageContext.request.contextPath}/Ajax8Servlet");
        //4,调用send方法，发送请求
        xmlhttp.send(null);


        //给省份注册onchange事件，用于给出省份改变相应的城市作出改变
        province.onchange=function(){
            //得到选中的省份的名字
            var selName=province.value;
            //得到城市下拉框对象
            var city=document.getElementById("c");
            //每次改变之后要将城市下拉框初始化
            city.innerHTML="<option>---请选择城市---</option>";
            for (var i = 0; i < JSON.length; i++) {
                //得到省份名
                var proName = JSON[i].name;
                if(selName==proName){
                    //得到省份下面的城市
                    var cityList=JSON[i].citys;
                    //遍历城市
                    for(var j=0;j<cityList.length;j++){
                        //得到每个城市的城市名
                        var cityName=cityList[j].name;
                        //将省对应的城市添加到城市下拉框中
                        var option=document.createElement("option");
                        //设置属性内容
                        option.textContent=cityName;
                        city.appendChild(option);
                    }
                }
            }
        }
    }
</script>
<body>
    <select name="province" id="pro" >
        <option>---请选择省份---</option>
    </select>
    <select name="city" id="c">
        <option>---请选择城市---</option>
    </select>
</body>
</html>

第五个世界

发布了48 篇原创文章 · 获赞 7 · 访问量 3万+

私信关注

二级联动：JSON和XML实现

猜你喜欢