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写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery冲突问题解决方法
Jan 19 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
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
面料业务员岗位职责
2013/12/26 职场文书
五一家具促销方案
2014/01/10 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
学校节水倡议书
2015/04/29 职场文书
消夏晚会主持词
2015/06/30 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
如何用Navicat操作MySQL
2021/05/12 MySQL
Golang ort 中的sortInts 方法
2022/04/24 Golang