zoukankan      html  css  js  c++  java
  • AJAX---发送GET请求并传递参数

    GET请求

    通常在一次 GET 请求过程中,参数传递都是通过 URL 地址中的 ? 参数传递

        var xhr = new XMLHttpRequest()
        // 这里任然是使用URL中的问号参数传递数据
        xhr.open('GET', 'users.php?id=2')
        xhr.send(null)
    
        xhr.onreadystatechange = function () {
          if (this.readyState !== 4 && this.state !== 200) return
          console.log(this.responseText)
        }

    练习: 发送请求, 获取列表数据, 呈现在页面

        //获取ul
        var ulList = document.getElementById('list')
    
        // 发送请求获取列表数据呈现在页面
        // =======================================
    
        var xhr = new XMLHttpRequest()
    
        xhr.open('GET', 'users.php')
    
        xhr.send()
    
        xhr.onreadystatechange = function () {
          if (this.readyState !== 4) return
          var data = JSON.parse(this.responseText)
          // data => 数据
    
          //遍历循环,动态创建li, 把li添加到ul里面
          for (var i = 0; i < data.length; i++) {
            //动态创建li
            var liElement = document.createElement('li')
            //设置li的名字为接收到数据data的名字 name
            //设置li的id为接收到数据data的id
            liElement.innerHTML = data[i].name
            liElement.id = data[i].id
            //把li添加到ul里面
            ulList.appendChild(liElement)
            //给li添加点击事件
            liElement.addEventListener('click', function () {
              // TODO: 通过AJAX操作获取服务端对应数据的信息
              // 如何获取当前被点击元素对应的数据的ID
              // console.log(this.id)
              var xhr1 = new XMLHttpRequest()
              xhr1.open('GET', 'users.php?id=' + this.id)//获取当前被点击元素对应的数据的ID
              xhr1.send()
              xhr1.onreadystatechange = function () {
                if (this.readyState !== 4) return
                var obj = JSON.parse(this.responseText)
                alert(obj.age)
              }
            })
          }
        }
  • 相关阅读:
    Eighth scrum meeting
    Seventh scrum meeting
    Sixth scrum meeting
    Fifth scrum meeting
    Forth scrum meeting
    Third scrum meeting
    2019-07-25 L430 生物 GPS
    L429 Why Do Smart People Do Foolish Things?
    L427 长难句
    L426
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12270209.html
Copyright © 2011-2022 走看看