Ajax入门(与Java服务器交互)(三)——解析XML数据、使用级联下拉选择框

最新推荐文章于 2024-06-12 20:02:29 发布

请叫我益达张

最新推荐文章于 2024-06-12 20:02:29 发布

阅读量1.2k

点赞数 2

分类专栏： Ajax 文章标签： Ajax 入门教程 xml解析级联菜单

本文链接：https://blog.csdn.net/zyh5540/article/details/10032783

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用Ajax与后台服务器进行交互时，返回的数据并不是都是文本类型，也有xml类型、Jason类型等。

本篇文章主要讲解对返回的xml类型数据进行解析。

示例解析：

我们要做到示例是，有两个下拉选框，第一个下拉框是省份，第二个是所选省下相对应的市。当省份改变时，相对应的市也应改变。例如，当选择广东省时，地区项应包括：广州、深圳、佛山、汕头。

示例图示：

源代码：

jsp页面文件：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'select.jsp' starting page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript">
    <!--
    var xmlHttp;
    function createXmlHttp() {
        if(window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    function updateSelect() {
        var selected = document.getElementById("slt1").value;
        createXmlHttp();
        xmlHttp.onreadystatechange = processor;
        var url = "createXml?selected=" + selected;
        xmlHttp.open("POST",url,true);
        xmlHttp.send(null);
    }
    function processor() {
        var result;
        if(xmlHttp.readyState == 4) {
            if(xmlHttp.status == 200) {
                //注意此处是xmlHttp.responseXML而不是xmlHttp.responseText
                //获取节点名为city的所有节点
                result = xmlHttp.responseXML.getElementsByTagName("city");
                var slt2 = document.getElementById("slt2");
                //将二级下拉框中的所有选项清空
                while(slt2.options.length>0) {
                    slt2.removeChild(slt2.childNodes[0]);
                }
                //根据返回节点数目构造下拉选项
                for(var i=0; i<result.length; i++) {
                    var option = document.createElement("option");
                    //根据节点名称获取城市名称，并赋值
                    option.text = result[i].getElementsByTagName("cityname")[0].firstChild.nodeValue;
                    //根据节点名称获取城市值，并赋值
                    option.value = result[i].getElementsByTagName("cityvalue")[0].firstChild.nodeValue;
                    //千万不要忘记将该节点加入到下拉框父节点中
                    slt2.options.add(option);
                }
            }
        }
    }
    -->
    </script>
  </head>
  
  <body>
  <form>
      省份：
      <select id="slt1" onChange="updateSelect()">
          <option value="1">河南省</option>
          <option value="2">广东省</option>
      </select>
      地区：
      <select id="slt2">
          <option>请选择地方</option>
          <option value="1">濮阳</option>
          <option value="2">安阳</option>
          <option value="3">南阳</option>
          <option value="4">郑州</option>
      </select>
  </form>
  </body>
</html>

Servlet源代码：

package com.zyh.servlet;

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;

public class CreateXml extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//这里一定要设置为xml类型的文件，而不是text/html
		response.setContentType("text/xml;charset=utf-8");
		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>");
			out.println("<city>");
			out.println("<cityname>郑州</cityname>");
			out.println("<cityvalue>4</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("<city>");
			out.println("<cityname>汕头</cityname>");
			out.println("<cityvalue>4</cityvalue>");
			out.println("</city>");
		}
		out.println("</response>");
		out.flush();
		out.close();
	}
	
}

请叫我益达张

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax入门(与Java服务器交互)(三)——解析XML数据、使用级联下拉选择框

使用Ajax与后台服务器进行交互时，返回的数据并不是都是文本类型，也有xml类型、Jason类型等。本篇文章主要讲解对返回的xml类型数据进行解析。示例解析：我们要做到示例是，有两个下拉选框，第一个下拉框是省份，第二个是所选省下相对应的市。当省份改变时，相对应的市也应改变。例如，当选择广东省时，地区项应包括：广州、深圳、佛山、汕头。示例图示：源代码：jsp页面文
复制链接

扫一扫

专栏目录