html5关于JQuery加载xml然后进行获取其相同节点的信息

最新推荐文章于 2021-07-15 22:52:33 发布

milijiangjun

最新推荐文章于 2021-07-15 22:52:33 发布

阅读量1k

点赞数

分类专栏： # html5 xml

本文链接：https://blog.csdn.net/milijiangjun/article/details/80396354

版权

html5 同时被 2 个专栏收录

232 篇文章 4 订阅

订阅专栏

xml

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>krpano - 1</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	<script type="text/javascript">
		 function LoadShow(){

            console.log(1);
        }
	</script>
	  <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
	<style>
		@-ms-viewport { width:device-width; }
		@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
		html { height:100%; }
		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
	</style>
</head>
<body>

<script src="tour.js"></script>

<div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
	
	<script>
		$(document).ready(function() { 
 	console.log(4);
}); 
		function LoadX(){
			  $.ajax({
                    type:"get",
                    url:"Load.xml",//这里通过设置url属性来获取xml
                    dataType:"xml",
                    timeout:1000,      //设定超时
                    cache:false,       //禁用缓存
                    success:function(xml){//这里是解析xml
                    
                        $(xml).find("Users").each(function(i){
                            var DTUrl = $(this).children("DTUrl");   //获取id节点
                           var DTUrlNav =  $(this).find("DTUrl");
                           var c= $(this).find("dturl").map((i,v)=>$(v).text());
                           	  DTUrlNav.each(function(){//循环遍历获取到的元素对象
							        var value=$(this).text();//获取当前元素对象中的value属性值
							        console.log("dx");
							        console.log(value);//弹出一下
							          console.log("dx");
							    }); 

                            var  DTUrl_text = DTUrl.text();              //获取节点文本
                            var SandData = $(this).children("SandData");   //获取id节点

                            var  SandData_text = SandData.text();              //获取节点文本
                            var LogoUrl = $(this).children("LogoUrl");   //获取id节点

                            var  LogoUrl_text = LogoUrl.text();              //获取节点文本
                            var DesignerPhone = $(this).children("DesignerPhone");   //获取id节点

                            var  DesignerPhone_text = DesignerPhone.text();              //获取节点文本
                            // Data.DemoPhone = DesignerPhone_text;// 设置为公有的
                            // UpdataLogo(LogoUrl_text);
                            // Data.SandListDB = eval(SandData_text);
                            // LoadSPSand(eval(SandData_text),DTUrl_text);
                            console.log(c);
                            // console.log(DTUrl_text);
                            // console.log(SandData_text,DTUrl_text);
                            // console.log(LogoUrl_text);
                          
                        });
                        console.log("华丽的分割线");
                        var str ='<Layer><Feature id="1"><Attribute value="XXX小区" name="xmmc"/><Attribute value="2008-074" name="xmbh"/><Attribute value="16750" name="jzmj"/></Feature><Feature id="473"><Attribute value="XX小区" name="xmmc"/><Attribute value="2006-057" name="xmbh"/><Attribute value="17749" name="jzmj"/></Feature></Layer>';
                          var xmlDom=$.parseXML(str);//将xml解析为js DOM对象
						    var xmbhObj=$(xmlDom).find('[name=xmbh]');//获取对象中的所有name属性值为xmbh的元素对象（可能有多个）
						    xmbhObj.each(function(){//循环遍历获取到的元素对象
						        var value=$(this).attr('value');//获取当前元素对象中的value属性值
						        console.log(value);//弹出一下
						    });
                         
                    }
                });

		}
		window.onload = function(){
LoadX();
		}


		embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
	</script>
</div>

</body>
</html>

下面我们看要请求的xml 的代码

<?xml version="1.0" encoding="utf-8"?>
<Users>
  <DTUrl name="xmbh" value="XXX小区" >../ditu.jpg</DTUrl>
  <DTUrl name="xmbh" value="XXX小区2" >../ditu2.jpg</DTUrl>
  <SandData>[
  {
    "LookOrderImg": "1.jpg",
    "X": "41",
    "Y": "63"
  },
  {
    "LookOrderImg": "2.jpg",
    "X": "89",
    "Y": "163"
  },
  {
    "LookOrderImg": "3.jpg",
    "X": "129",
    "Y": "253"
  },
  {
    "LookOrderImg": "4.jpg",
    "X": "230",
    "Y": "250"
  },
  {
    "LookOrderImg": "5.jpg",
    "X": "229",
    "Y": "227"
  },
  {
    "LookOrderImg": "6.jpg",
    "X": "230",
    "Y": "143"
  }
]</SandData>
  <LogoUrl>../../../LogoType/yigui/logo.png</LogoUrl>
  <DesignerPhone>15831835686</DesignerPhone>
</Users>

在来看要显示的效果：

可以清晰的看到在循环中可以直接获得对象，这里展示了2中获得数据的方法

milijiangjun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5关于JQuery加载xml然后进行获取其相同节点的信息

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;krpano - 1&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
复制链接

扫一扫