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)
          }
        })
      }
    }