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技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
JavaScript实现分页效果
Mar 28 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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中curl_multi的应用
2013/07/17 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php unlink()函数使用教程
2018/07/12 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
Python argv用法详解
2016/01/08 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
详解python-图像处理(映射变换)
2019/03/22 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
EJB的几种类型
2012/08/15 面试题
大学生个人自荐信
2014/02/24 职场文书
企业读书活动总结
2014/06/30 职场文书
村级个人对照检查材料
2014/08/22 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript