61 jQuery-使用全局函数get()实现异步获取XML文档数据

版权声明:本文为大都督作者的原创文章,未经 大都督 允许也可以转载,但请注明出处,谢谢! 共勉! https://blog.csdn.net/qq_37335220/article/details/85834445

1.效果图

在这里插入图片描述

2.HTML代码

2.1 jquery_get.html页面代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>61 jQuery-使用全局函数get()实现异步获取XML文档数据</title>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft
           .Gradient(GradientType=0,StartColorStr=#ffffff,
           EndColorStr=#ECE9D8);}
    </style>
</head>
<body>
	<div class="divFrame">
         <div class="divTitle">
              <input id="Button1" type="button" class="btn" value="获取数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
     </div>
              
<script src="../../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	//按钮点击事件
	$("#Button1").click(function(){
		//打开文件,并通过回调函数处理获取的数据
		$.get("/jquery/userInfo_xml", function(data){
			//先清空标记中的内容
			$("#divTip").empty();
			//初始化保存内容变量
			var strHTML = "";
			//遍历获取的数据
			$(data).find("User").each(function(){
				var $strUser = $(this);
				strHTML += "姓名:"+$strUser.find("name").text()+"<br>";
				strHTML += "爱好:"+$strUser.find("hobby").text()+"<br><hr>";
			})
			//显示处理后的数据
			$("#divTip").html(strHTML);
		})
	})
})
</script>
</body>
</html>

2.2 userInfo.xml页面代码

<Info>
  <User id="1">
    <name>大都督</name>
    <hobby>学习</hobby>
  </User>
  <User id="2">
    <name>大都督1</name>
    <hobby>敲代码</hobby>
  </User>
</Info>

3.Java代码

package com.example.demo.manager;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Description jquery控制层
 * @author 大都督
 * @date 2019年1月3日
 */
@Controller
@RequestMapping("/jquery")
public class JqueryManager extends BaseManager{


	/**
	 * 
	* @Title: jqueryGet 
	* @Description:跳转到jquery_get页面  
	* @return 
	* @author 大都督
	* @date 2019年1月5日
	* @return String
	 */
	@RequestMapping("/jquery_get")
	public String jqueryGet() {
		return "jquery/ajax/jquery_get";
	}
	/**
	 * 
	* @Title: userInfo_xml 
	* @Description:获取userInfo_xml页面 
	* @return 
	* @author 大都督
	* @date 2019年1月5日
	* @return String
	 */
	@RequestMapping("/userInfo_xml")
	public String userInfo_xml() {
		return "jquery/testFile/userInfo.xml";
	}
}

猜你喜欢

转载自blog.csdn.net/qq_37335220/article/details/85834445
61