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拖动改变div大小
Jul 04 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery+ajax实现用户登录验证
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 define函数的使用说明
2008/08/27 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
python中文乱码的解决方法
2013/11/04 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
基于python的Paxos算法实现
2019/07/03 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
元旦联欢会策划方案
2014/06/11 职场文书
社区服务标语
2014/07/01 职场文书
妈妈活动方案
2014/08/15 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2015年科室工作总结
2015/04/10 职场文书
爱国主义影片观后感
2015/06/18 职场文书
高中体育课教学反思
2016/02/16 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL