使用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();
	}
	
}

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

  1. HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

    这篇文章主要介绍了HTML5、Select下拉框右边加图标的实现代码,深度美化页面增进用户体验效果,需要的朋友可以参考下

  2. ios – 有关多个连接/提要/视图的XML解析的设计/实现建议

    >我应该在每个视图中都有解析器类/对象或解析XML提要吗?

  3. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  4. Swift-使用NSXMLParser解析XML文件

    Update2015/12/01:UpdatedforXcode7.1.1(7B1005)andSwift2.1.Swift-使用NSXMLParser解析XML文件解析XML文件需要实现NSXMLParserDelegate协议,实现以下几个函数:具体代码实现:访问:http://www.oschina.net/action/api/news_list将页面保存为current_news_lis

  5. Swift开发:解析xml文件案例

    swift代码:结果:

  6. Swift学习笔记2网络数据交换格式XML,JSON解析 [iOS实战 入门与提高卷]

    示例文档Notes.xml创建XMLParser类调用与运行结果用TBXML来解析XML文档TBXML是第三方框架,使用起来比NSXML更简单。

  7. Swift开发:创建XML文件,包含节点,属性值

    .append;//3创建第二个节点数据letitem2:Item=Item;for{letnode=Node;node.id=i+1;node.attributes=["ID":"\","Name":"N-\","disp":"1","Appliance":"1","Icon":"ic_switch_4"]item2.addNode;}xml.items?

  8. 在swift中进行XML解析

    有些人可以帮助我为什么下面的代码不起作用..我在Xcode.1Playground中测试它操场是沙盒,因此您无法从用户文件夹中的任何位置抓取文件.以下是如何将该文件添加到您的游乐场以使其可访问:>在Finder中找到您的“.playground”文件>右键单击并选择“显示包内容”>你应该看到“timeline.xctimeline”,“contents.xcplayground”和“section

  9. 在Swift中从URL解析XML

    我是一个全新的解析,无法找到任何没有过时的教程,也没有提出更多的问题.我有一个简单的xml文件url我试图解析.xml非常简单:并且只想将其保存为NSDictionary(标记为键和数据作为值).到目前为止,我能够成功完成的是在控制台中打印xml字符串:我已经完成了我发现的任何在线教程,这些教程要么过时,要么过于复杂.任何帮助表示赞赏.过程很简单:>创建XMLParser对象,并将数据传递给它.>

  10. 如何在Swift中解析XML Web服务?

    我不知道如何在下面的代码解析..有人可以您应该在请求的完成处理程序中使用NSXMLParser:显然,上述假定您(a)定义了您的视图控制器以符合NSXMLParserDelegate和(b)已实现NSXMLParserDelegate方法,例如就像是:

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部