首页 🚓JavaScript

axios-day01

01.使用axios发起GET请求

<!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>
    <!-- 1. 必须先导入 axios 的库文件,然后就可以调用 axios() 函数了 -->
    <script src="./lib/axios.js"></script>
    <script>
      // 目标:发起 GET 请求,获取图书列表的数据
      axios({
        // 指定请求方式
        method: 'GET',
        url: 'http://www.liulongbin.top:3009/api/getbooks',
      }).then((res) => {
        console.log(res);
      });
    </script>
  </body>
</html>

02.查询参数的本质

<!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>
    <script src="./lib/axios.js"></script>
    <script>
      axios
        .get('http://www.liulongbin.top:3009/api/getbooks', {
          params: {
            id: 1,
          },
        })
        .then((ret) => {
          console.log(ret.data.data);
        });
    </script>
  </body>
</html>

03.对象的结构赋值

<!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>
  <script>
    let username = 'abc'

    const { username: name } = { username: 'zs', age: 20, gender: '女' }

    console.log(name)
  </script>
</body>

</html>

04.使用axios发起POST请求

<!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="btnPOST">新增数据</button>

    <script src="./lib/jquery.js"></script>
    <script src="./lib/axios.js"></script>

    <script>
      // jquery 的入口函数
      $(function () {
        // 1. 为 button 绑定 click 点击事件
        // 2. 在点击事件中,发起 POST 请求
        //   url: 'http://www.liulongbin.top:3009/api/addbook',
        $('button').click(() => {
          axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3009/api/addbook',
            data: {
              bookname: 'lavine',
              author: '30',
              publisher: '上海出版社',
            },
          }).then((res) => {
            console.log(res);
          });
        });
      });
    </script>
  </body>
</html>

案例-新闻列表

function initNewSlist() {
  axios({
    method: 'GET',
    url: `http://www.liulongbin.top:3009/api/news`,
  }).then(({ data: res }) => {
    render(res.data);
  });
}
initNewSlist();
function render(data) {
  data.forEach((obj) => {
    const theDiv = `<div class="news-item">
    <img class="thumb" src="http://www.liulongbin.top:3009${obj.img}" alt="" />
    <div class="right-box">
      <!-- 新闻标题 -->
      <h1 class="title">${obj.title}</h1>
      <div class="footer">
        <div>
          <!-- 新闻来源 -->
          <span>${obj.source}</span>&nbsp;&nbsp;
          <!-- 发布日期 -->
          <span>${obj.time}</span>
        </div>
        <!-- 评论数量 -->
        <span>评论数:${obj.cmtcount}</span>
      </div>
    </div>
  </div>`;
    $('#news-list').append(theDiv);
  });
}

案例2-用户登录

$(function () {
  // 1. 为 button 绑定点击事件处理函数
  // 2. 在点击事件处理函数中,使用 axios 发起 POST 登录请求
  // 3. 在发起请求的时候,使用 data 选项,把账号和密码提交给服务器
  $('#btnLogin').on('click', function () {
    axios({
      method: 'POST',
      url: 'http://www.liulongbin.top:3009/api/login',
      data: {
        username: $('#username').val(),
        password: $('#password').val(),
      },
    }).then(({ data: res }) => {
      if (res.code === 200) {
        alert('登陆成功');
      } else {
        alert('登陆失败');
      }
    });
  });
});

案例3-聊天机器人

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <title>聊天机器人</title>
  </head>

  <body>
    <div class="wrap">
      <!-- 头部 Header 区域 -->
      <div class="header">
        <h3>小思同学</h3>
        <img src="img/person01.png" alt="icon" />
      </div>
      <!-- 中间 聊天内容区域 -->
      <div class="main">
        <ul class="talk_list" style="top: 0px" id="talk_list">
          <!-- 机器人 -->
          <li class="left_word"><img src="img/person01.png" /> <span>嗨,最近想我没有?</span></li>
          <!-- 我 -->
          <li class="right_word"><img src="img/person02.png" /> <span>嗨,最近想我没有?</span></li>
        </ul>
      </div>
      <!-- 底部 消息编辑区域 -->
      <div class="footer">
        <img src="img/person02.png" alt="icon" />
        <input type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" />
        <input type="button" value="发 送" class="input_sub" id="btnSend" />
      </div>
    </div>
    <script src="./lib/axios.js"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <audio src="" id="voice" autoplay style="display: none"></audio>
    <script>
      $('#btnSend').click(() => {
        const val = $('#ipt').val().trim();
        if (!val) {
          return alert('请输入聊天内容');
        }
        $('#ipt').val('');
        const theRightLi = $(`<li class="right_word">
          <img src="img/person02.png" /> <span>${val}</span>
        </li>`);
        $('#talk_list').append(theRightLi);
        theRightLi[0].scrollIntoView();
        say(val);
      });
      // 回车发布
      $('input').on('keyup', function (e) {
        if (e.keyCode === 13) {
          $('#btnSend').click();
        }
      });

      // 自动回复
      function say(val) {
        axios({
          method: 'GET',
          url: 'http://www.liulongbin.top:3006/api/robot',
          params: {
            spoken: val,
          },
        }).then((res) => {
          const text = res.data.data.info.text;
          const theLeftLi = $(`      <li class="left_word"><img src="img/person01.png" /> <span>${text}</span></li>`);
          $('#talk_list').append(theLeftLi);
          theLeftLi[0].scrollIntoView();
          voice(text);
        });
      }
      // 语音
      function voice(text) {
        axios({
          method: 'GET',
          url: 'http://www.liulongbin.top:3006/api/synthesize',
          params: {
            text: text,
          },
        }).then(({ data: res }) => {
          if (res.status === 200) {
            $('audio').prop('src', res.voiceUrl);
          }
        });
      }
    </script>
  </body>
</html>



文章评论

目录