Ajax从天行数据获得图片接口

最新推荐文章于 2024-01-04 00:04:03 发布

朕喜技术

最新推荐文章于 2024-01-04 00:04:03 发布

阅读量595

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/lalalheinan/article/details/98886010

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax从天行数据获得图片接口插入到页面

<!DOCTYPE html>      
<html>
<head>
	<title>Ajax 使用</title>
	<meta charset="utf-8">
</head>
<body>       
	<div id="myDiv"><h2>Let AJAX change this text</h2></div>        
	<button type="button" onclick="loadXMLDoc()">改变文件内容</button>

	<!-- JavaScript         -->
	<!-- <script>        
	function loadXMLDoc() {        
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=%E7%99%BE%E5%BA%A6", true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("view").innerHTML = xhr.responseXML;
            }                
        }
    }   
	</script> --> 
	<script type="text/javascript">
		function loadXMLDoc() {
			XHR = new XMLHttpRequest();
			// 把key替换成自己的key
			XHR.open('GET', 'http://api.tianapi.com/meinv/?&key=KEY&num=50&rand=1', true);
			XHR.send();
			XHR.onreadystatechange = function() {
				if (XHR.readyState === 4 && XHR.status === 200) {
					myDiv = document.getElementById('myDiv');
					// 从天行数据那获取数据之后解码为JSON对象。
					getText = JSON.parse(XHR.responseText); 
					for (var i = 0; i < getText.newslist.length; i++) {
						createSrc = document.createElement('img');
						createSrc.setAttribute('src', getText.newslist[i].picUrl);
						createTitle = document.createElement('h1');
						titleText = document.createTextNode(getText.newslist[i].title);
						createTitle.append(titleText);
						createDescription = document.createElement('p');
						DescriptionText = document.createTextNode(getText.newslist[i].description);
						createDescription.append(DescriptionText);
						myDiv.append(createTitle, createSrc, createDescription);
					}
				}
			}
		}
	</script>
</body>        
</html>

朕喜技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax从天行数据获得图片接口

Ajax从天行数据获得图片接口插入到页面<!DOCTYPE html> <html><head> <title>Ajax 使用</title> <meta charset="utf-8"></head><body> <div id="myDiv">&l...
复制链接

扫一扫

专栏目录