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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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日期时间函数的高级应用技巧
2009/05/16 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
初三开学计划书
2014/04/27 职场文书
护士求职信范文
2014/05/24 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
学校运动会开幕词
2016/03/03 职场文书