根据url地址不同,给用户呈现不同的界面(html),重点就是传输数据携带的id值

输入框传值

  1. //网页a
  2. <input type="text" placeholder="音乐/视频/电台/用户" id="input">
  3. <script>
  4. $("#input").keydown(function(event){
  5. value = this.value
  6. if(event.keyCode == 13){
  7. location.href=`search.html?value=${value}`
  8. }
  9. })
  10. </script>
  11. //网页b
  12. var keyValue = location.search;
  13. console.log(keyValue)
  14. keyValue = decodeURIComponent(keyValue.split("=")[1])
  15. $("#input").val(keyValue)
  16. $.ajax({
  17. type: "get",
  18. url: `http://192.168.4.18:3000/search?keywords=${keyValue}&type=10`,
  19. success: function(res){
  20. var a = res.result.albums;
  21. a.forEach((item,index)=>{
  22. var htmlItem = `
  23. <div class="song">
  24. <div class="img">
  25. <img src=${item.blurPicUrl} alt="">
  26. </div>
  27. <a href="" class="button"></a>
  28. <p class="songname"><a href="#">${item.name}</a></p>
  29. <p class="name"><a>${item.artist.name}</a></p>
  30. </div>
  31. `
  32. $("#song").append(htmlItem)
  33. })
  34. var show = `
  35. <p class="nav">搜索“<span>${keyValue}</span>”,找到 <span>${a.length}</span> 张专辑</p>
  36. `
  37. $("#show").html(show)
  38. }
  39. });

a标签赋值跳转

  1. //网页a
  2. <a href="list.html?id=${item.id}"><img src=${item.coverImgUrl} alt="" class="img"></a>
  3. //网页b
  4. var keyValue = location.search;
  5. keyValue = decodeURIComponent(keyValue.split("=")[1])

标签自定义属性跳转

  1. //网页a
  2. <img src=${item.al.picUrl} data-aid=${item.id} class="pang">
  3. //data-aid的data属于前缀,自定义属性前必须加data-
  4. <script>
  5. $(".pang").click(function(event){
  6. location.href = `comment.html?id=${event.target.dataset.aid}`
  7. })
  8. </script>
  9. //网页b
  10. var keyValue = location.search;
  11. keyValue = decodeURIComponent(keyValue.split("=")[1])