一、用户名验证基本逻辑
- 为用户名输入框绑定blur事件，当输入框失去焦点后，客户端向后端服务器发送Ajax请求（此处使用Ajax模拟表单请求提交）
- 服务器收到请求后，连接数据库进行查询并将结果响应回前端
- 客户端接收后端响应后进行处理并展示给用户
二、主要知识点：Ajax发送post请求、node连接数据库（参考上一篇博客）
Ajax发送post请求
- 创建Ajax核心对象
let xhr = new XMLHttpRequest() - 编写回调函数
xhr.onreadystatechange = function(){ } - 建立连接
xhr.open('post',URL,true) //true表示异步 - 发送请求
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//get请求不需要编写请求头
xhr.send("键=值&键=值···")//post请求需要提交的数据
三、核心代码
点击查看前端代码
window.onload = function(){
let userName = document.querySelector('input[name="userName"]')
let msg = document.querySelector('.msg')
userName.addEventListener('blur',function(){
let userVal = userName.value
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(this.readyState==4){
if(this.status==200){
msg.innerHTML=this.responseText
}
}
}
xhr.open('POST','/users',true)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('userName='+userVal)
})
}
点击查看后端代码
router.post('/',function(req,res,next){
let userVal = req.body.userName
let sql = 'select * from user where userName=?'
db.query(sql,[userVal],(err,data)=>{
if(err) throw err
if(data.length>0){
res.send('用户名已存在')
}else{
res.send('')
}
})
})
四、效果展示
