jquery处理xml数据

最新推荐文章于 2023-09-29 12:03:25 发布

丨深水蓝丨

最新推荐文章于 2023-09-29 12:03:25 发布

阅读量1.7k

点赞数

分类专栏： web Ajax 文章标签： jquery xml xmlhttprequest integer stylesheet callback

本文链接：https://blog.csdn.net/qq445422083/article/details/7965252

版权

web 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Ajax

5 篇文章 0 订阅

订阅专栏

1,AjaxJqueryXml.js

function verify(){
	//alert("哈哈，我出来了！")
	//1.获取文本框中的内容
	//jquery查找节点的方式，参数加#加上id属性可以找到一个节点
	//jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法
	var jqueryObj = $("#userName");
	//获取节点的值
	var userName = jqueryObj.val();
	//alert(userName);
	//2.将文本框中的数据发送给服务遄的servlet
	//使用jquery的XMLHTTPrequest对象get请求的封装
	//$.get("servlet/AjaxServlet?name="+userName,null,callback);
	
	//使用jquery的xmlhttprequest对象get请求的封装
	//var obj = {name:"123",age:20};
	$.ajax({
		type: "POST",
		url: "servlet/AjaxXmlServlet",
		data: "name=" + userName,		//发送给服务端的数据
		dataType: "xml",		//告诉jquety返回的数据格式
		success: callback		//定义交互完成，并且服务端在下返回数据的回调函数
	});
	
}
// 回调函数
function callback(data){
	//3.接收服务器端返回的数据
	//alert("服务器端的数据回来了！")
	//需要将data这个对象中的数据解析出来
	//首先需要将dom的对象转换成jquery的对象
	var jqueryObj = $(data);
	//获取message节点
	var message = jqueryObj.children();
	//获取文本内容
	var text = message.text();
	//4.将服务器返回的数据动态的显示在网页上
	//找到保存结果信息的节点
	var resultObj = $("#result");
	//动态的改变页面中DIV节点的内容
	resultObj.html(text);
	//alert("");
}

2,AjaxXmlServlet.java

package com.panlong.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 AjaxXmlServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
			Integer total = (Integer) req.getSession().getAttribute("total");
			int temp = 0;
			if(total == null ){
				temp = 1;
			}else{
				temp = total.intValue() + 1;
			}
		req.getSession().setAttribute("total",total.intValue()+temp);
		try {
			//1.取参数
			resp.setContentType("text/xml;charset=GB2312");
			PrintWriter out = resp.getWriter();
			StringBuilder builder = new StringBuilder();
			
			String old = req.getParameter("name");
			
			//2、检查参数是否有问题
			String name = old;
			
		
			builder.append("<message>");
			if("".equals(old) || old == null){
				builder.append("用户名必须输入").append("</message>");
				
			}
			else	
				 {

			if("lila".equals(name)){
				builder.append("该用户名已经注册").append("</message>");
			}else{
					builder.append("该用户名未注册，您可以注册["+name+"]这个用户名").append("</message>");
				
			}
		 }
			out.println(builder.toString());
		
		}catch (Exception e) {
			e.printStackTrace();
		//3.检验操作
		}
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doGet(req, resp);
	}

}

3, 前台html页面

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX实例</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=GB2312">
    <script type="text/javascript" src="js/AjaxJqueryXml.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
   		<font color="blue" size="2">请输入用户名：</font> 
   		 <input type="text" id="userName" /><font color="red" size="2"><span id="result" >*</span></font><br/><br/>
   		 <input type="submit" name="提交" value="提交"  οnclick="verify()"/>
   		 
  </body>
</html>

注意：请自己添加jquery库文件。