axios post请求——用户登录

可可格子衫

已于 2023-01-16 20:18:30 修改

阅读量1.2k

点赞数

文章标签：前端 javascript 开发语言

于 2023-01-16 20:17:32 首次发布

本文链接：https://blog.csdn.net/weixin_51745081/article/details/128708843

版权

该段代码展示了如何使用JavaScript的axios库发送POST请求进行用户登录操作。当点击按钮时，获取输入框的用户名和密码，然后将这些信息作为数据发送到指定URL。如果服务器响应的code为200，表示登录成功，否则显示错误消息。

摘要由CSDN通过智能技术生成

axios post请求——用户登录

<script>
    // 请求方式 POST
    // 地址 http://www.liulongbin.top:3009/api/login
    // 参数:  username 用户名     password  密码  ==> 请求体参数，写在data中

    // 1. 给按钮注册click
    document.querySelector('#btnLogin').addEventListener('click', function () {
      // 2. 获取输入框的值 ==> value属性
      let username = document.querySelector('#username').value
      let password = document.querySelector('#password').value
      // console.log(username, password)

      // 3. 使用axios发送请求，之后根据响应结果，做提示
      axios({
        method: 'post', // post 无论大小写都是可以的
        url: 'http://www.xxxxxx',
        data: {
          // 对象属性简写
          username,
          password
        }
      }).then(({ data: res }) => {
        // 请求成功

        console.log(res) // res 服务器响应回来的数据

        // 200 是业务状态码（不是写死的，从响应体数据里面去看）
        if (res.code === 200) {
          // 登录成功
          alert('恭喜你，登录成功了，稍后跳转去首页')
          // location.href = 'http://www.jd.com'
        } else {
          // 登录失败
          alert(res.msg)
        }
      })
    })
  </script>