<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
list-style: none;
}
.box li{
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
</style>
</head>
<body>
<select name="" id="type">
<option value="">--请选择--</option>
<option value="top">头条</option>
<option value="guonei">国内</option>
<option value="junshi">军事</option>
</select>
<ul class="box"></ul>
<script>
var o_select = document.getElementById("type");
o_select.onchange = function() {
var v = this.value;
if(v !== ""){
showInfo(v);
}
};
function showInfo (type) {
var box=document.getElementsByClassName('box')[0];
box.innerHTML = "";//调取下一个时候把上一个清空
var xhr=new XMLHttpRequest();//创建对象
//发送请求
var url="http://localhost:8088?myUrl=http://v.juhe.cn/toutiao/index?type="+type+"&key=803c0269fc5497a04e8d57496b3916a2";
xhr.open('get',url,true);
//监听状态改变事件
xhr.onreadystatechange=function () {
if(xhr.readyState===4&&xhr.status===200){
//获取服务气端的响应
var data=JSON.parse(xhr.responseText).result.data;
console.log(data);
for(var i=0;i<data.length;i++){
var o_li=document.createElement('li');//创建li
var o_img=document.createElement('img')//创建img
var o_h3=document.createElement('h3');
o_li.appendChild(o_img)
o_img.src=data[i].thumbnail_pic_s;
o_h3.innerHTML=data[i].title
o_li.appendChild(o_h3);
box.appendChild(o_li)
}
}
}
xhr.send();
}
</script>
</body>
</htm
1870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
