利用jQuery处理xml返回数据

最新推荐文章于 2021-08-06 04:56:35 发布

iteye_9841

最新推荐文章于 2021-08-06 04:56:35 发布

阅读量123

点赞数

分类专栏： Ajax 文章标签： XML jQuery Ajax Servlet JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_9841/article/details/81971937

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>ajaxxml.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/verifyjqueryxml.js"></script>
	</head>

	<body>
		<h3>
			用户名输入校验的例子
		</h3>
		<!-- ajax方式下不需要使用表单进行数据提交，因此不用写表单标签 -->
		<!-- ajax方式不需要name属性，需要一个id属性 -->
		<input name="username" type="text" id="username">
		<br>
		<input type="button" value="检验" οnclick="verify()">
		<!-- 这个div用于存放服务器端返回的信息，开始为空 -->
		<!-- id属性定义是为了利用dom的方式找到某一个节点进行操作 -->
		<div id="result"></div>
	</body>
</html>

package com.zchen.ajax.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;

//返回XML数据
public class AJAXXMLServlet extends HttpServlet {
	private static final long serialVersionUID = 3611240119854641367L;

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

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			//修改点1：响应的Content-Type必须是text/xml
			response.setContentType("text/xml;charset=utf-8");
			
			PrintWriter out = response.getWriter();
			String old = request.getParameter("name");
			
			//修改点2：返回数据需要拼装成xml格式
			StringBuilder builder = new StringBuilder();
			builder.append("<message>");
			if (old == null || old.length() == 0) {
				out.println("用户名不能为空");
			} else {
				String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
				if (name.equals("chenzhen")) {
					builder.append("用户名[" + name + "]已经存在。").append("</message>");
				} else {
					builder.append("用户名[" + name + "]尚未存在。").append("</message>");
				}
				out.println(builder.toString());
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

导入jquery库

//用户名校验的方法
//这个方法是用jquery来进行AJAX的异步数据交互
function verify(){
	//根据属性值查找节点得到的是jquery的对象
	var jqueryObj = $("#username");
	//根据查找到底节点获取文本框的值
	var username = jqueryObj.val();
	//将文本框的数据发送给服务器的service
	//javascript当中一个简单的对象的定义方法
	$.ajax({
		type: "POST",//http请求方式
		url: "servlet/AJAXXMLServlet",//服务器端url地址
		data: "name="+username,//发送给服务器端的数据
		dataType: "xml",//告诉jquery返回的数据格式
		success: callback//定义交互完成并且服务器正确返回数值时调用的回调函数
	});
}
//回调函数
function callback(data){
	//接受服务器返回的数据
	//需要将dom的对象转成jquery的对象
	//首先需要将dom的对象转换成jQuery的对象
	var jqueryObj = $(data);
	//获取message节点
	var message = jqueryObj.children()
	//获取文本的内容
	var text = message.text();
	//将服务器返回的数据动态的现实在页面上
	//找到保存结果信息的节点
	var resultObj = $("#result");
	//动态的改变页面中div节点中的内容
	resultObj.html(text);
}

iteye_9841

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用jQuery处理xml返回数据

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;ajaxxml.html&lt;/title&gt; &lt;meta http-equiv="keywords" content="
复制链接

扫一扫