二级联动：JSON和XML实现

来源：互联网发布：美国人如何学编程的编辑：程序博客网时间：2024/06/07 04:57

方式一、返回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>

0 0