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 相关文章推荐
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP语法速查表
2007/01/02 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php函数与传递参数实例分析
2014/11/15 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Django中url的反向查询的方法
2018/03/14 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Jupyter加载文件的实现方法
2020/04/14 Python
python代码区分大小写吗
2020/06/17 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
python爬虫 requests-html的使用
2020/11/30 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
军训自我鉴定怎么写
2014/02/13 职场文书
物业保安岗位职责
2014/07/02 职场文书
风之谷观后感
2015/06/11 职场文书
《颐和园》教学反思
2016/02/19 职场文书