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 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
You might like
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
BootStrap中
2016/12/10 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
pyv8学习python和javascript变量进行交互
2013/12/04 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
给医务人员表扬信
2014/01/12 职场文书
村长贪污检举信
2014/04/04 职场文书
安全隐患整改报告
2014/11/06 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
保外就医申请书范文
2015/08/06 职场文书