maka_ba_ka
/
01.Ajax初体验.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btnGET">发起GET请求，获取图书列表数据</button>

  <!-- 1. 导入 jQuery -->
  <script src="./lib/jquery-v3.6.0.js"></script>
  <script>
    $(function () {

      $('#btnGET').on('click', function () {
        // 调用 $.ajax() 方法，请求服务器的数据
        $.ajax({
          // 请求的方式
          type: 'GET',
          // 请求的 url 地址
          url: 'http://192.168.180.50:3006/api/getbooks?id=1&bookname=love',
          // 通过 data 属性指定查询的参数（注意：用 data 指定的查询参数，最终会被拼接到 URL 地址的末尾）
          // data: { id: 1, bookname: 'love' },
          // 成功的回调函数，只要数据请求成功了，就会调用 success
          success: function (res) {
            console.log(res)
          }
        })
      })

    })
  </script>
</body>

</html>