根据url地址不同,给用户呈现不同的界面(html),重点就是传输数据携带的id值
输入框传值
//网页a
<input type="text" placeholder="音乐/视频/电台/用户" id="input">
<script>
$("#input").keydown(function(event){
value = this.value
if(event.keyCode == 13){
location.href=`search.html?value=${value}`
}
})
</script>
//网页b
var keyValue = location.search;
console.log(keyValue)
keyValue = decodeURIComponent(keyValue.split("=")[1])
$("#input").val(keyValue)
$.ajax({
type: "get",
url: `http://192.168.4.18:3000/search?keywords=${keyValue}&type=10`,
success: function(res){
var a = res.result.albums;
a.forEach((item,index)=>{
var htmlItem = `
<div class="song">
<div class="img">
<img src=${item.blurPicUrl} alt="">
</div>
<a href="" class="button"></a>
<p class="songname"><a href="#">${item.name}</a></p>
<p class="name"><a>${item.artist.name}</a></p>
</div>
`
$("#song").append(htmlItem)
})
var show = `
<p class="nav">搜索“<span>${keyValue}</span>”,找到 <span>${a.length}</span> 张专辑</p>
`
$("#show").html(show)
}
});
a标签赋值跳转
//网页a
<a href="list.html?id=${item.id}"><img src=${item.coverImgUrl} alt="" class="img"></a>
//网页b
var keyValue = location.search;
keyValue = decodeURIComponent(keyValue.split("=")[1])
标签自定义属性跳转
//网页a
<img src=${item.al.picUrl} data-aid=${item.id} class="pang">
//data-aid的data属于前缀,自定义属性前必须加data-
<script>
$(".pang").click(function(event){
location.href = `comment.html?id=${event.target.dataset.aid}`
})
</script>
//网页b
var keyValue = location.search;
keyValue = decodeURIComponent(keyValue.split("=")[1])