XHR请求

• ajax get无参请求

        let button = document.querySelector('button')
        button.addEventListener('click', function () {
            let xhr = new XMLHttpRequest()
            xhr.open('get', 'http://www.itcbc.com:3006/api/getbooks')
            xhr.send(null)
            xhr.addEventListener('load', function () {
               
                console.log(JSON.parse(xhr.response), typeof JSON.parse(xhr.response));
            })
        })

• ajax get有参请求

        let button = document.querySelector('button')
        button.addEventListener('click', function () {
            let xhr = new XMLHttpRequest()
            xhr.open('get', 'http://www.itcbc.com:3006/?id=xxx&xxx')
            xhr.send(null)
            xhr.addEventListener('load', function () {
               
                console.log(JSON.parse(xhr.response));
            })
        })

• ajax post无参请求

 <form class="card-body bg-light" id="addForm">
      <!-- 书名 -->
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">书名</span>
        </div>
        <input
          type="text"
          class="form-control"
          placeholder="请输入图书名称"
          name="bookname"
        />
      </div>
      <!-- 作者 -->
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">作者</span>
        </div>
        <input
          type="text"
          class="form-control"
          placeholder="请输入作者名字"
          name="author"
        />
      </div>
      <!-- 出版社 -->
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">出版社</span>
        </div>
        <input
          type="text"
          class="form-control"
          placeholder="请输入出版社名称"
          name="publisher"
        />
      </div>
      <input type="button" value="添加" class="btn btn-dark btnadd" />
    </form>
    <script src="./lib/axios.js"></script>
    <script>
      let btnadd = document.querySelector('.btnadd')
      let bookname = document.querySelector('[name="bookname"]')
      let author = document.querySelector('[name="author"]')
      let publisher = document.querySelector('[name="publisher"]')

      btnadd.addEventListener('click', function() {
        // 收集数据
        let booknameV = bookname.value
        let authorV = author.value
        let publisherV = publisher.value

        // 创建异步对象
        let xhr = new XMLHttpRequest()

        // 发起请求
        // 请求行:post不能在请求行中拼接参数，否则相当于没有传递
        xhr.open('post', 'http://www.itcbc.com:3006/api/addbook')
        // 请求头:post方式传递普通键值对，需要设置Content-type编码格式，否则后台无法正确的获取到参数
        // xhr.setRequestHeader(
        //   'Content-Type',
        //   'application/x-www-form-urlencoded'
        // )
        xhr.setRequestHeader('Content-Type', 'application/json')
        // 请求体，参数格式与get一样，除非你进行其它的处理
        // xhr.send(
        //   `bookname=${booknameV}&author=${authorV}&publisher=${publisherV}`
        // )
        xhr.send(
          JSON.stringify({
            bookname: booknameV,
            author: authorV,
            publisher: publisherV
          })
        )

        // 接收响应
        xhr.addEventListener('load', function() {
          console.log(JSON.parse(xhr.response))
        })
      })