1.     <!-- ajax
  2.         1.客户端向服务器获取数据的一种技术
  3.         2.是一种在无需重新加载整个网页的情况下,能够局部更新网页的技术
  4.      -->
  5.      <!-- 如何实现 -->
  6.      <script>
  7.          var url ="http://192.168.4.18:8000/"
  8.          /* 1.创建ajax核心对象 */
  9.          var xhr = new XMLHttpRequest();
  10.          /* 2.与服务建立连接(method,url,async) */
  11.          xhr.open("get",url,true)
  12.          /* 3.发送请求 */
  13.          xhr.send()
  14.          /* 4.响应 */
  15.          xhr.onreadystatechange =  function(){
  16.              if(xhr.status == 200 && xhr.readyState ==4){
  17.                  var res =JSON.parse(xhr.responseText) ;
  18.                  console.log(res)
  19.              }
  20.          }
  21.      </script>

封装ajax

  1. function ajax({
  2.     url,
  3.     method,
  4.     success
  5. }){
  6.     var xhr = new XMLHttpRequest()
  7.     xhr.open(method,url,true)
  8.     xhr.send()
  9.     xhr.onreadystatechange = function(){
  10.         if(xhr.readyState == 4 && xhr.status == 200){
  11.             var res = JSON.parse(xhr.responseText);
  12.             success(res);
  13.         }
  14.     }
  15. }
  1.         var url  = "http://192.168.4.18:8000/"
  2.         ajax({
  3.             url,
  4.             method:"get",
  5.             success:res=>{
  6.                 console.log(res)
  7.             }
  8.         })

渲染列表

  1. <body>
  2.     <div class="app">
  3.         <div class="left">
  5.         </div>
  6.         <div class="right">
  8.         </div>
  9.     </div>
  10.     <script>
  11.         /* 1.渲染列表 */
  12.         var listUrl = "http://192.168.4.18:8000/";
  13.         ajax({
  14.             url: listUrl,
  15.             method: "get",
  16.             success: res => {
  17.                 var arr = res.result;
  18.                 arr.forEach((item, index) => {
  19.                     var {pic,title,raiting,slogo,evaluate,labels} = item;
  20.                     var sum =labels.join("/")
  21.                     var htmlItem = `
  22.                     <div class="item">
  23.                         <span>${index+1}</span>
  24.                         <img src=${pic} alt="">
  25.                         <div>
  26.                             <p class="title">${title}</p>
  27.                             <p>${sum}</p>
  28.                             <p><span>评分:${raiting}</span> <span> ${evaluate}人评价</span></p>
  29.                             <p>${slogo}</p>
  30.                          </div>
  31.                    </div>
  32.                     `
  33.                     $(".left").append(htmlItem);
  34.                 })
  35.             }
  36.         })
  37.     </script>

封装的http

  1. var baseUrl   ="http://192.168.4.18:3000/"
  2. function ajax({
  3.     url,
  4.     method = "get",
  5.     success
  6. }){
  7.    var xhr =  new XMLHttpRequest();
  8.    xhr.open(method,url=baseUrl+url,true);
  9.    xhr.send();
  10.    xhr.onreadystatechange = function(){
  11.        if(xhr.readyState == 4 && xhr.status == 200){
  12.            var result = JSON.parse(xhr.responseText);
  13.            success(result)
  14.        }
  15.    }
  16. }
  19. /* banner的http为例 */
  21.  function httpBanner(callback){
  22.      ajax({
  23.          url:"banner",
  24.          success:res=>{
  25.             callback(res)
  26.          }
  27.      })
  28.  }
  30.  function httpList(callback){
  31.      ajax({
  32.          url:"top/playlist?cat=华语",
  33.          success:res=>{
  34.              callback(res);
  35.          }
  36.      })
  37.  }

点击事件跳转

  1.     <div class="item" data-aid="1234">
  2.         hello world 1
  3.     </div>
  4.     <div class="item" data-aid="1524">
  5.         hello world 1
  6.     </div>
  7.     <script>
  8.         $(".item").click(function(event){
  9.             console.log(event.target.dataset.aid)
  10.         })
  11.     </script>

页面之间跳转传值

  1.     <input type="text" id="input">
  2.     <script>
  3.         var input = document.getElementById("input");
  4.         input.onkeydown = function(event){
  5.             if(event.keyCode == 13){
  6.                 console.log(this.value);
  7.                 location.href = `search.html?s=${this.value}`
  8.             }
  9.         }
  10.     </script>
  1.     <input type="text">
  2.     <p>搜索</p>
  3.     <script>
  4.         var a = location.search.split("=")[1]
  5.         var c = decodeURIComponent(a)
  6.         console.log(c)
  7.     </script>