3.用ajax获取页面中的内容 - 图2

3-1

  1. <div id="app">
  2. </div>
  3. <script>
  4. var arr = [
  5. {name:"cheng",age:18},
  6. {name:"li",age:17}
  7. ]
  8. arr.forEach((item,index)=>{
  9. var html = `
  10. <div class="item">
  11. <span>${index+1}</span>
  12. <span >${item.name}</span>
  13. <span>${item.age}</span>
  14. </div>
  15. `
  16. $("#app").append(html)
  17. })
  18. </script>

3-2获取豆瓣的页面内容

  1. <div class="movie">
  2. </div>
  3. <div class="right">
  4. </div>
  5. <script>
  6. var url = "http://192.168.4.18:8000";
  7. ajax({
  8. url,
  9. method: "get",
  10. success: res => {
  11. console.log(res);
  12. res.result.forEach((item, index) => {
  13. var html = `
  14. <div class="movie1">
  15. <div class="img">
  16. <span>${index + 1}</span>
  17. <img src=${item.pic}>
  18. </div>
  19. <div class="text">
  20. <p class="title">${item.title}</p>
  21. <p class="labels">${item.labels.join("/")}</p>
  22. <p class="raiting">评分${item.raiting}<sapn class="evaluate">&nbsp;&nbsp;&nbsp;${item.evaluate}评价</sapn></p>
  23. <p class="slogo">${item.slogo}</p>
  24. </div>
  25. </div>
  26. `
  27. $(".movie").append(html);
  28. })
  29. }
  30. })
  31. var url = "http://192.168.4.18:8000/ad"
  32. ajax({
  33. url,
  34. method: "get",
  35. success: res => {
  36. console.log(res);
  37. var html = `
  38. <div slass="right1">
  39. <p class="introduce">${res.result.title}</p>
  40. <img src=${res.result.poster}>
  41. <div class="footer">
  42. <div class="img1"><img src=${res.result.erweima}></div>
  43. <div class="img2"><img src=${res.result.logo}></div>
  44. <div class="txt">
  45. <p class="main-tittle">${res.result.labels[0]}</p>
  46. <p class="sub-tittle">${res.result.labels[1]}</p>
  47. </div>
  48. </div>
  49. </div>
  50. `
  51. $(".right").append(html);
  52. }
  53. });
  54. </script>

3-3获取网易云页面内容

  1. var url="http://192.168.4.18:3000/banner";
  2. ajax({
  3. url,
  4. method:"get",
  5. success:res=>{
  6. console.log(res);
  7. res.banners.forEach(item=>{
  8. // console.log(item.imageUrl)
  9. var html=`
  10. <img src=${item.imageUrl}>
  11. `
  12. $("#list").append(html)
  13. })
  14. }
  15. })
  16. var url="http://192.168.4.18:3000/top/playlist?cat=华语"
  17. ajax({
  18. url,
  19. method:"get",
  20. success:res=>{
  21. function go(value){
  22. if(value>10000){
  23. return value=Math.floor(value/10000)+"万"
  24. }
  25. return value
  26. }
  27. console.log(res)
  28. res.playlists.forEach(item=>{
  29. console.log(item.coverImgUrl)
  30. var html=`
  31. <div class="img1">
  32. <img src=${item.coverImgUrl}>
  33. <p class="one">
  34. <span class="ear"></span>
  35. <span class="fan">${go(item.playCount)}</span>
  36. <span class="play"></span>
  37. </p>
  38. <p>${item.name}</p>
  39. </div>
  40. `
  41. $(".r-content").append(html)
  42. })
  43. }
  44. })