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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery图片预览插件实现方法详解
Jul 18 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
使用php4加速网络传输
2006/10/09 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
django中的HTML控件及参数传递方法
2018/03/20 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
Python错误的处理方法
2020/06/23 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
教师旷工检讨书
2014/01/18 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
鉴史问廉观后感
2015/06/10 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
Go语言基础知识点介绍
2021/07/04 Golang