Ajax用户名验证

一、用户名验证基本逻辑

1. 为用户名输入框绑定blur事件，当输入框失去焦点后，客户端向后端服务器发送Ajax请求（此处使用Ajax模拟表单请求提交）
2. 服务器收到请求后，连接数据库进行查询并将结果响应回前端
3. 客户端接收后端响应后进行处理并展示给用户

二、主要知识点：Ajax发送post请求、node连接数据库（参考上一篇博客）

Ajax发送post请求

1. 创建Ajax核心对象
   let xhr = new XMLHttpRequest()
2. 编写回调函数
   xhr.onreadystatechange = function(){ }
3. 建立连接
   xhr.open('post',URL,true) //true表示异步
4. 发送请求
   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('')
    }
  })
})

四、效果展示