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动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
追悼会上的答谢词
2014/01/10 职场文书
生产部岗位职责范文
2014/02/07 职场文书
高中军训感想300字
2014/03/04 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
学雷锋活动简报
2015/07/20 职场文书