Ajax向服务器发起POST请求实现用户登录功能

#Ajax向服务器发起POST请求实现用户登录功能

` 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
目标2：使用提示框，反馈提示信息

/*
*    封装提示框函数，重复调用渲染视图，满足提示需求
*    功能：
* 1、显示提示提示框
* 2、不同提示文字msg  和成功绿色失败红色 isSuccess（true成功   false失败）
* 3、过2秒后，让提示框自动消失
*/

`
需要服务器资源的也可以直接私信

  <script>
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示信息

    /*
    *    封装提示框函数，重复调用渲染视图，满足提示需求
    *    功能：
    * 1、显示提示提示框
    * 2、不同提示文字msg  和成功绿色失败红色 isSuccess（true成功   false失败）
    * 3、过2秒后，让提示框自动消失
    */

    **// 目标二、**
    // 获取提示框
    const myAlert = document.querySelector('.alert')
    function alertFn(msg,isSuccess) {
        //1、显示提示框
        myAlert.classList.add('show')

        //2、 提示信息渲染视图
        myAlert.innerHTML = msg
        // 判断到底是添加那个颜色的类名
        const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
        myAlert.classList.add(bgStyle)


        // 3、过2秒隐藏提示框  采用延迟定时器函数
        setTimeout(() => {
            // 移除提示框
            myAlert.classList.remove('show')
            // 然后将颜色类名重置
            myAlert.classList.remove(bgStyle)
        },2000)
        
    }
    
    **// 目标一、1.1  登录点击事件**
    document.querySelector('.btn-login').addEventListener('click',() => {
        // 1.2  获取用户名密码
        const username = document.querySelector('.username').value
        const password = document.querySelector('.password').value
        // console.log(username,password)

        // 1.3 长度判断  ，不合法不发起提交
        if (username.length <= 8 ) {
            // 调用函数  传入参数 
            alertFn('用户名必须大于等于8位',false)
            console.log('用户名必须大于等于8位')
            return      //阻止代码执行，限制提交请求
        }
        if (password.length <= 6) {
            // 调用函数  传入参数 
            alertFn('密码必须大于等于6位',false)
            console.log('密码必须大于等于6位')
            return   //阻止代码执行，限制提交请求
        }

        // 1.4 基于axios提交用户和密码
        // console.log('提交数据到服务器')
        axios({
            url: 'http://hmajax.itheima.net/api/login',
            method: 'POST',
            // 发起请求携带的数据参数
            data: {
                // username: username,
                // password: password
                // 属性名和属性值同名可以简写
                username,
                password
            }
        }).then(result => {     // 返回正确信息的结果
            alertFn(result.data.message,true)
            // 将返回的正确状态打印出来
            console.log(result)
            // 将状态属性值直接打印出来
            console.log(result.data.message)
        }).catch(error => {      // 返回错误信息的结果
            alertFn(error.response.data.message,false)
            // 将返回的错误状态打印出来
            console.log(error)
            // 将状态属性值直接打印出来
            console.log(error.response.data.message)
        })
    })
    
  </script>