AJAX检测用户名是否存在的方法


Posted in Javascript onMarch 24, 2021
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <h2>用户注册</h2>
 <form action="/doreg" method="post">
  <ul>
   <li>用户名:<input type="text" name="username" id="user"><span id="msg"></span></li>
   <li>密码:<input type="text" name="pwd"></li>
   <li>确认密码:<input type="text" name="repwd"></li>
   <li><input type="submit" value="注册"></li>
  </ul>
 </form>
 <script>
  let user = document.querySelector("#user")
  let msg = document.querySelector("#msg")
  user.onblur = function(){
   // alert("hello")
   // 第一步:创建一个ajax对象
   let xhr = new XMLHttpRequest(); // xhr表示ajax对象 此时ajax的状态是0
   // console.log(xhr.readyState)
   // 第二步:和服务器建立连接 get表示需要把数据放在url中
   xhr.open("get","/check?username="+user.value)// 此时ajax的状态是1
   // console.log(xhr.readyState)
   // 第三步:发出请求
   xhr.send(null); // null表示请求体是空 get请求的请求体都是空 post请求的请求体不空
   // 第四步:得到服务器响应的结果 监听ajax状态变化
   xhr.onreadystatechange = function () { // 当状态发生改变,就会触发onreadystatechange事件
    // console.log(xhr.readyState); // xhr.readyState获取ajax对象的状态
    if(xhr.readyState === 4 && xhr.status == 200){
     // xhr.responseText 获取服务器响应的数据
     // console.log(xhr.responseText)
     msg.innerHTML = xhr.responseText;
    }
   }
 
  }
 
 </script>
</body>
</html>
let express = require("express");
let bodyParser = require("body-parser");
let app = express();
 
// 给ejs模板引擎设置别名,别名叫html
app.engine("html",require("ejs").__express);
app.set("view engine","html");// 使用html模板引擎
// 指定模板的存放位置
app.set("views","./views")
 
// 配置bodyParser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))
 
// 路由
app.get("/",(req,res)=>{
 res.render("reg01"); // 渲染模块
})
 
// 处理注册
app.post("/doreg",(req,res)=>{
 // 获取客户端传递的数据
 let username = req.body.username.trim();
 let pwd = req.body.pwd.trim();
 let repwd = req.body.repwd.trim();
 // console.log(username,pwd,repwd)
 
 // 模拟从数据库中获取的用户信息
 let users = ["wangcai","xiaoqiang","admin"];
 if(users.find(user=>user===username)){
  res.send("<h1 style='color: red'>对不起,该用户名已经被注册了,请换个用户名~<a href='/'>返回注册页</a></h1>")
 }else{
  res.send("<h1 style='color: green'>恭喜你,该用户名可以使用~<a href='/'>返回注册页</a></h1>")
 }
})
 
app.listen(3000,()=>{
 console.log("server is running on 3000~")
})

 

Javascript 相关文章推荐
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
JavaScript中return false的用法
Mar 12 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
You might like
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
js简单抽奖代码
2015/01/16 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
各营销点岗位职责范本
2014/03/05 职场文书
党支部活动策划方案
2014/08/18 职场文书
党员自评材料范文
2014/12/17 职场文书
家长给老师的感谢信
2015/01/20 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL