server2.js

var express=require('express');

var expressStatic=require('express-static');

var server=express();

server.listen();

//用户数据

var users={

  'mike': '',

  'jack': '',

  'luci': ''

};

server.get('/login', function (req, res){

  var user=req.query['user'];

  var pass=req.query['pass'];

  if(users[user]==null){

    res.send({ok: false, msg: '此用户不存在'});

  }else{

    if(users[user]!=pass){

      res.send({ok: false, msg: '密码错误'});

    }else{

      res.send({ok: true, msg: '成功'});

    }

  }

});

server.use(expressStatic('./www'));

a.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="ajax.js" charset="utf-8"></script>

    <script type="text/javascript">

    window.onload=function (){

      var oUser=document.getElementById('user');

      var oPass=document.getElementById('pass');

      var oBtn=document.getElementById('btn1');

      oBtn.onclick=function (){

        ajax({

          url: '/login',

          data: {user: oUser.value, pass: oPass.value},

          success: function (str){

            var json=eval('('+str+')');

            if(json.ok){

              alert('登录成功');

            }else{

              alert('登录失败：'+json.msg);

            }

          },

          error: function (){

            alert('不好意思，失败了');

          }

        });

      };

    };

    </script>

  </head>

  <body>

    用户：<input type="text" id="user" /><br>

    密码：<input type="password" id="pass" /><br>

    <input type="button" value="登录" id="btn1" />

  </body>

</html>

ajax.js

function json2url(json){

    var arr=[];

    for(var name in json){

        arr.push(name+'='+json[name]);

    }

    return arr.join('&');

}

function ajax(json){

    json=json || {};

    if(!json.url)return;

    json.data=json.data || {};

    json.type=json.type || 'get';

    var timer=null;

    if(window.XMLHttpRequest){

        var oAjax=new XMLHttpRequest();

    }else{

        var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

    }

    switch(json.type){

        case 'get':

            oAjax.open('GET',json.url+'?'+json2url(json.data),true);

            oAjax.send();

            break;

        case 'post':

            oAjax.open('POST',json.url,true);

            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

            oAjax.send(json2url(json.data));

            break;

    }

    oAjax.onreadystatechange=function(){

        if(oAjax.readyState==){

            clearTimeout(timer);

            if(oAjax.status>= && oAjax.status< || oAjax.status==){

                json.success && json.success(oAjax.responseText);

            }else{

                json.error && json.error(oAjax.status);

            }

        }

    };

}

截图：

效果：

nodejs 静态资源文件与登陆交互的更多相关文章

  1. Spring MVC 处理静态资源文件

    摘要: 三个方案: 1.方案一:激活Tomcat的defaultServlet来处理静态文件 2.方案二: 在spring3.0.4以后版本提供了mvc:resources (需要配置annotati ...

  2. spring mvc静态资源文件的引用

    在页面的<title>下 <link rel="stylesheet" href="<%=request.getContextPath()%> ...

  3. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  4. SpringMVC+FreeMarker实现静态资源文件自动添加版本号(md5)

    近日切换java开发,开始学习springframework.在实现静态资源文件自动计算版本号的实例时,因为不熟悉框架,走了不少弯路,好在最终解决了问题.这里写篇文章记录一下实现,也希望对大家有些用处 ...

  5. Django使用模板后无法找到静态资源文件

    Django使用模板后无法找到静态资源文件 环境配置 Django版本1.11 python版本3.6.2 前言 在编写Django网站的时候,在涉及模板方面,一些简单的例子都没有问题,但这些例子都有 ...

  6. 关于IDEA每次修改HTML,Css等静态资源文件都需要重启的设置修改

    ~ ~ ~ ~ ~ 关于IDEA每次修改HTML,Css等静态资源文件都需要重启的设置修改 最近开始使用IDEA进行项目开发,但是对于每次修改HTML文件中css和js文件之后都必须重启服务这件事表示 ...

  7. linux下配置nginx使用ftp目录作为静态资源文件的目标目录

    1.安装ftp服务,可以直接yum install vsftpd. 2.设置随机启动,chkconfig vsftpd on. 3.启动ftp服务,service vsftpd start. 4.配置 ...

  8. 如何引用GitHub的静态资源文件 js css

    参考:引用GitHub的静态资源文件 有些人说直接用 Github Raw 浏览器不执行是因为返回的 content-type 是 text/plain,这么说不准确.实际上浏览器对 MIME 类型并 ...

  9. IntelliJ IDEA - 热部署插件JRebel ,对静态资源文件进行热部署？javascript、css、vm文件

    IntelliJ IDEA - 热部署插件JRebel ,对静态资源文件进行热部署?javascript.css.vm文件https://blog.csdn.net/feng_pump/article ...

随机推荐

  1. Bata冲刺第三天

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...

  2. android中返回数据给上一个活动，可以用来回显数据

    (一)who简介:没错,就是startActivityForResult()方法,这个方法用来在活动被销毁的时候返回数据给上一个方法.参数说明: startActivityForResult(inte ...

  3. 【Java学习笔记】2015.1.5

    1.classpath中的“.”表示当前的路径,所以配置classpath时要注意不能忘了“.”.如果不注意,会出现cmd下运行程序时,.java文件可以编译但是不能运行: 一般的classpath配 ...

  4. ATM&购物商城程序

    模拟实现一个ATM + 购物商城程序 额度15000或自定义 实现购物商城,买东西加入购物车,调用信用卡接口转账 可以体现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款接 ...

  5. laravel5.6 基于redis，使用消息队列（邮件推送）

    邮件发送如何配置参考:https://www.cnblogs.com/clubs/p/10640682.html 用到的用户表: CREATE TABLE `recruit_users` ( `id` ...

  6. Concurrent - 并发框架

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11426833.html SynchronizedMap和ConcurrentHashMap有什么区别? ...

  7. Vuetify按需加载配置

    自己配置vuetify按需加载的步骤,在此记录: 执行npm install vuetify –save 或 yarn add vuetify添加vuetify添加依赖执行npm install -- ...

  8. 【Tomcat】使用Tomcat部署Spring Boot项目生成的jar包

    介绍 简单来说,Tomcat是一个免费的,用于Java Web应用以及其它Web应用的一个Web服务器.(简单地概括一下,可能有误) 下载与安装 本文章目标是把Spring Boot Web项目生成的 ...

  9. Django中object.all是什么东西

    前言 先抛出一个问题.银行就相当于一个数据库,你去银行取钱存钱办卡销卡,是你告诉银行柜员方便还是你自己去操作电脑办卡取卡方便?(你还不一定会,假设自动存款机还没发明),object在数据库中就相当于银 ...

  10. HTML5: HTML5 WebSocket

    ylbtech-HTML5: HTML5 WebSocket 1.返回顶部 1. HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 ...