核心提示：ajax 数据交互。首先我们先分装一个ajax以方便下面使用。function ajax(option){var type=option.type;var url=option.url;var asy...
ajax 数据交互。首先我们先分装一个ajax以方便下面使用。
function ajax(option){
var type=option.type;
var url=option.url;
var async=option.async;
var success=option.success;
var xml = null;
if(window.XMLHttpRequest){
xml = new XMLHttpRequest();
}else {
xml = new ActiveXObject("Microsoft.XMLHttp");
}
xml.open(type,url,async);
xml.send();
xml.onreadystatechange = function (){
if(xml.readyState == 4){
if (xml.status==200) {
// var body=JSON.parse(xml.responseText);//转化为对象类型
success&&success(JSON.parse(xml.responseText));
}
}
}
}
其次再构建一个html框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="./ajax.js"></script>
<style>
#swrap{
width: 1000px;
margin: 0 auto;
}
#list{
width: 100%;
}
#list li{
width: 300px;
display: inline-block;
}
#list li img{
width: 100%;
}
#box{
margin-left:560px ;
}
</style>
</head>
<body>
<p id="box">
<input type="text" name="" value="" placeholder="" id="txt">
<input type="button" name="" value="提交" id="btn">
<audio controls autoplay>
</audio>
</p>
<p id="swrap">
<ul id="list">
<li><img src="images/pic7.png" alt=""></li>
<li><img src="images/pic7.png" alt=""></li>
<li><img src="images/pic7.png" alt=""></li>
<li><img src="images/pic7.png" alt=""></li>
<li><img src="images/pic7.png" alt=""></li>
<li><img src="images/pic7.png" alt=""></li>
<li><img src="images/pic7.png" alt=""></li>
<li><img src="images/pic7.png" alt=""></li>
<li><img src="images/pic7.png" alt=""></li>
</ul>
</p>
</body>
</html>
ajax数据交互：
<script>
window.onload=function(){
var obtn=document.getElementById('btn');
var oTxt=document.getElementById('txt');
obtn.onclick=function(){
if(oTxt.value == ''){
alert('你丫啥啊')
return false;
}
ajax({
type :'get',
url:' https://api.imjad.cn/cloudmusic/? type=search&s='+oTxt.value,
async:true,
success: function(data){
var oul=document.getElementById('list');
oul.innerHTML='';
for (var i = 0; i < data.result.songs.length; i++) {
var li=document.createElement('li');
var oimg=document.createElement('img');
oimg.setAttribute('src',data.result.songs[i].al.picUrl) ;
oimg.setAttribute('data-id',data.result.songs[i].id);
li.appendChild(oimg);
oul.appendChild(li);
}
}
})
var oul=document.getElementById('list');
var oimg=document.getElementById('img');
oul.onclick=function(){
var e=e||window.event;
var target=e.srcElement||e.target;
if (target.nodeName=='IMG'){
// console.log(target.getAttribute('data-id'));
ajax({
type:'get',
url:'https://api.imjad.cn/cloudmusic/? type=song&id='+target.getAttribute('data-id'),
async:true,
success:function(data){
var oad=document.getElementsByTagName('audio')[0];
oad.setAttribute('src',data.data[0].url)
}
})
}
}
}
}
</script
<script>
window.onload=function(){
var obtn=document.getElementById('btn');
var oTxt=document.getElementById('txt');
obtn.onclick=function(){
if(oTxt.value == ''){
alert('你丫啥啊')
return false;
}
ajax({
type :'get',
url:' https://api.imjad.cn/cloudmusic/? type=search&s='+oTxt.value,
async:true,
success: function(data){
var oul=document.getElementById('list');
oul.innerHTML='';
for (var i = 0; i < data.result.songs.length; i++) {
var li=document.createElement('li');
var oimg=document.createElement('img');
oimg.setAttribute('src',data.result.songs[i].al.picUrl) ;
oimg.setAttribute('data-id',data.result.songs[i].id);
li.appendChild(oimg);
oul.appendChild(li);
}
}
})
var oul=document.getElementById('list');
var oimg=document.getElementById('img');
oul.onclick=function(){
var e=e||window.event;
var target=e.srcElement||e.target;
if (target.nodeName=='IMG'){
// console.log(target.getAttribute('data-id'));
ajax({
type:'get',
url:'https://api.imjad.cn/cloudmusic/? type=song&id='+target.getAttribute('data-id'),
async:true,
success:function(data){
var oad=document.getElementsByTagName('audio')[0];
oad.setAttribute('src',data.data[0].url)
}
})
}
}
}
}
</script>
