node.js+jQuery实现用户登录注册AJAX交互


Posted in jQuery onApril 28, 2017

最近实现了Node.js当作后台,jQuery写前台AJAX代码的,实现用户登录和注册的功能,刷新了前后端交互的三观。特记录一下。

1.login.ejs实现form框架

<form >
      <ul>
        <li><p>用户名</p></li>
        <li><input type="text" name="username" id="username"></li>
      </ul>
      <ul>
        <li><p>密码</p></li>
        <li><input type="password" name="password" id="password"></li>
      </ul>
      <ul class="mt50">
        <li><input id="login_submit" class="submit" type="button" value="登 陆"></li>
      </ul>
    </form>

form不加method,意图自己用ajax发送请求。

2.js实现request的发送

$("#login_submit").click(function(){
  var username=$('#username').val();
  var password=$('#password').val();
  //这里实现对 username和password格式的判断
  //........
  //发送ajax请求 使用post方式发送json字符串给后台login
  $.ajax({
    type: "post",
    url: "http://localhost:3000/login",
    dataType: "json",
    data:{ username: username, password: password },
    success: function(data){
    //接受返回的数据,前端判断采取的动作
      if(data){
        if(data.message=="false"){
          alert('密码错误,请重新输入');
          window.location.href="login";
        }else{
          alert('登陆成功');
          window.location.href="index";
        }
      } else{
      }
    }
  });
});

2.后台接收

/**
 * 注册页 post 
 */
router.post('/reg', function (req, res, next) {
  //先查询有没有这个user
  console.log("req.body"+req.body);
  user2.findDocuments(DATABASE, "users", 1, {"uName":req.body.username}, function (user) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    if(user.length==0){
      //用户名没有重复 同意创建用户
      user2.insertDocuments(DATABASE, "users",
        [{
          "uName":req.body.username,
          "uPasswd":req.body.password,
          "uEmail":req.body.email,
          "uHasshop":0,
          "uShopname":"null",
          "aId":'-1'

        }],
        function (result){
          res.send({status:"success", message:"true"});
        }
      );
    }
    else{
      // 用户名重复。找到这个user 不同意创建用户
      res.send({status:"success", message:"false"});
    }
  });
});

注册页面跟登陆页面类似。不再赘述。

总之呢,之前老是觉得自己浏览器访问的页面是前端的东西。后端是一个虚无缥缈的一堆代码。现在明白其实访问的所有的url都是属于后端的。后端发送什么内容,浏览器就显示什么内容。前端的显示只是一时半刻,后端的资源才是永久哒。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
jquery实现图片上传前本地预览
Apr 28 #jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
You might like
什么是短波收听SWL
2021/03/01 无线电
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python爬取哈尔滨天气信息
2018/07/14 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python获取linux系统信息的三种方法
2020/10/14 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
物业工作计划书
2014/01/10 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
《尊严》教学反思
2014/02/11 职场文书
钱学森电影观后感
2015/06/04 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript