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. NFS 共享存储实战

    目录 NFS 共享存储实战 一.NFS概述 二.NFS部署 部署NFS客户端backup和web01 统一web.nfs.backup的用户权限 代码部署步骤 三.NFS配置详解 NFS存储小结 四. ...

  2. expdp和impdp

    前言 一句话  expdp和impdp,只能在本地服务器运行 使用前 1.创建逻辑目录,该命令不会在操作系统创建真正的目录,最好以system等管理员创建.  create directory dpd ...

  3. 力扣——single number （只出现一次的数字） python实现

    题目描述: 中文: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 英 ...

  4. day01 html介绍 文档声明头 head标签 body标签

    day01 html   初识html <!--文档的声明--> <!doctype html>   <html lang="en">    # ...

  5. GCC -l选项：手动添加链接库

    链接器把多个二进制的目标文件(object file)链接成一个单独的可执行文件.在链接过程中,它必须把符号(变量名.函数名等一些列标识符)用对应的数据的内存地址(变量地址.函数地址等)替代,以完成程 ...

  6. array_shift — 将数组开头的单元移出数组

    <?php $stack = array("orange", "banana", "apple", "raspberry&q ...

  7. maven eclipse远程部署tomcat

    pom.xml tomcat 配置信息  <properties><project.build.sourceEncoding>utf8</project.build.so ...

  8. Struts2增删改查（自己思路理解）

    1:查询所有: DAO层:把所有的信息都放到list集合中.然后返回. public List<Employee> getEmployees(){ return new ArrayList ...

  9. jetson资料

    http://www.waveshare.net/wiki/Jetson_Nano_Developer_Kit http://www.waveshare.net/wiki/JetBot_AI_Kit ...

  10. CF 1150 D Three Religions——序列自动机优化DP

    题目:http://codeforces.com/contest/1150/problem/D 老是想着枚举当前在给定字符串的哪个位置,以此来转移. 所以想对三个串分别建 trie 树,然后求出三个t ...