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 相关文章推荐
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
js使用递归解析xml
Dec 12 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
js中的闭包学习心得
Feb 06 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
You might like
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
如何在django中运行scrapy框架
2020/04/22 Python
python mock测试的示例
2020/10/19 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
事业单位个人应聘自荐信
2013/09/21 职场文书
院药学专业个人求职信
2013/09/21 职场文书
网络工程师职业规划
2014/02/10 职场文书
行政内勤岗位职责
2014/04/07 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
python基础入门之字典和集合
2021/06/13 Python
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python