1.通过a标签实现页面的跳转

index

  1. `<!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="ajax/index.js"></script>
  9.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  10.     <style>
  11.         .item{
  12.             border:1px solid #333;
  13.         }
  14.         .item img{
  15.             width:100px;
  16.             height:100px  
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div id="app">
  23.     </div>
  24.     <script>
  25.         var url  = 'http://47.108.197.28:3000/top/playlist?cat=华语';
  26.         $ajax({
  27.             url,
  28.             success:res=>{
  29.                 console.log(res.playlists)
  30.                 var playlists = res.playlists;
  31.                 playlists.forEach((item,index)=>{
  32.                     var {name,id,coverImgUrl} = item;
  33.                     var template  = `
  34.                     <a href='detail.html?id=${id}'>
  35.                         <div class='item'>
  36.                             <img src='${coverImgUrl}'/>
  37.                             <p>${name}</p>
  38.                         </div>
  39.                     </a>
  40.                     `
  41.                     $("#app").append(template)
  42.                 })
  43.             }
  44.         })
  45.     </script>
  46. </body>
  47. </html>

detail

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="ajax/index.js"></script>
  9.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  10.     <style>
  11.         img{
  12.             width:200px;
  13.             height: 200px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div id="app">
  20.     </div>
  21.     <script>
  22.         /* 1、获取id值 */
  23.         var id =  location.search.split("=")[1];
  24.         // console.log(id)
  25.         /* 2、根据id值发送http请求 */
  26.         var url  = `http://47.108.197.28:3000/playlist/detail?id=${id}`;
  27.         $ajax({
  28.             url,
  29.             success:res=>{
  30.                 console.log(res.playlist)
  31.                 var {name,coverImgUrl,description} = res.playlist;
  32.                 var template = `
  33.                 <div>
  34.                     <img src='${coverImgUrl}'/>
  35.                     <p>${name}</p>
  36.                     <P>${description}</p>
  37.                 </div>
  38.                 `
  39.                 $("#app").append(template)
  40.             }
  41.         })
  42.     </script>
  43. </body>
  44. </html>

2.通过点击事件跳转

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="ajax/index.js"></script>
  9.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  10.     <style>
  11.         .item{
  12.             border:1px solid #333;
  13.         }
  14.         .item img{
  15.             width:100px;
  16.             height:100px  
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div id="app">
  23.     </div>
  24.     <script>
  25.         var url  = 'http://47.108.197.28:3000/top/playlist?cat=华语';
  26.         $ajax({
  27.             url,
  28.             success:res=>{
  29.                 var playlists = res.playlists;
  30.                 playlists.forEach((item,index)=>{
  31.                     var {name,id,coverImgUrl} = item;
  32.                     var template  = `
  33.                         <div class='item' data-aid=${id}>
  34.                             <img src='${coverImgUrl}'/>
  35.                             <p>${name}</p>
  36.                         </div>
  37.                     `
  38.                     $("#app").append(template)
  39.                 })
  41.                 $(".item").click(function(event){
  42.                      var {aid} = event.currentTarget.dataset;
  43.                      console.log(aid)
  44.                      location.href = `detail.html?id=${aid}`
  45.                 })
  46.             }
  47.         })
  49.     </script>
  50. </body>
  51. </html>