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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
python冒泡排序简单实现方法
2015/07/09 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python numpy 按行归一化的实例
2019/01/21 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Python列表推导式实现代码实例
2020/09/09 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
项目合作协议书
2014/04/16 职场文书
应届生求职信范文
2014/05/26 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
服务理念口号
2014/06/11 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python