jquery动态加载并解析xml至ul

最新推荐文章于 2020-09-16 13:24:04 发布

千羽12138

最新推荐文章于 2020-09-16 13:24:04 发布

阅读量319

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38709999/article/details/83618703

版权

web 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

做前台广告模块，将广告的信息（网址，图片路径）存入xml便于修改

ad.xml：

<?xml version="1.0" encoding="UTF-8"?>
<ads>
	<ad>
		<href>http://www.meituan.com</href>
		<imgsrc>images/ad/meituan.jpg</imgsrc>
		<description>美团</description>
	</ad>
	<ad>
		<href>http://www.baidu.com</href>
		<imgsrc>images/ad/baidu.png</imgsrc>
		<description>百度</description>
	</ad>
	<ad>
		<href>http://www.youku.com</href>
		<imgsrc>images/ad/youku.jpg</imgsrc>
		<description>优酷</description>
	</ad>
	<ad>
		<href>http://www.tudou.com</href>
		<imgsrc>images/ad/yilong.jpg</imgsrc>
		<description>艺龙</description>
	</ad>
</ads>

注：不加http://会默认访问工程内的网址

前台html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
	</head>
	<script src="js/jquery-1.4.4.min.js"></script>
	<script>
		$(document).ready(function(){
        	$.ajax({  
        	    url: 'ad.xml',
        	    type: 'GET',
        	    success: function(xml) {
        	    	$(xml).find("ad").each(function (){
        	    		var ad = $(this);
        	    		var imgsrc = ad.find("imgsrc").text();
        	    		var href = ad.find("href").text();
        	    		$("#ul1").append("<li><a href='"+href+"'><img alt='' src='"+imgsrc+"'/></a></li>");
        	    	});
        	    }
        	});
        });
		
	</script>
	<body>
		<h3>欢迎</h3>
		<ul id="ul1">
		</ul>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

测试时发现Adblock Plus（浏览器广告拦截插件）会拦截数据，f12报错net::ERR_BLOCKED_BY_CLIENT