#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>