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. 虚拟机设置静态IP地址

    前言 NAT连接方式只能配置一次,配置好子网掩码和网关IP后,虚拟机NAT连接的ip段都是同一个ip段 1.菜单栏选择 编辑 -> 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet8 N ...

  2. find和grep技巧

    1. find ./ -name "*streaming*"  查找文件 2.  grep -r KUBE_LOGTOSTDERR /etc/kubernetes/*  查找内容

  3. leetcode上的一些动态规划

    70-爬楼梯 思路:该问题可以理解为经典的“斐波那契数列”问题,但这里需要用动规实现,递归会超时 class Solution { public: int climbStairs(int n) { v ...

  4. shell从字符串中提取子串（正则表达式）

    通过试验,可以通过grep.sed两种方式实现. 假设需要提取libgcc-4.8.5-4.h5.x86_64.rpm中的版本号. grep echo "libgcc-4.8.5-4.h5. ...

  5. (5)C++ 循环和判断

    循环 一.for循环 ; i < ; i++) { cout << "abc"<< endl; } 或 ; i; i--) { cout <&l ...

  6. 测试过程中bug分类

    测试的核心任务是发现bug.在这之前是分析需求,之后是跟踪bug.跳出具体的项目来看,所有的bug无非是以下五大类. 软件没有实现应该实现的功能:如指定的登录功能. 软件出现了本应该避免的错误:如用户 ...

  7. 大数据学习之BigData常用算法和数据结构

    大数据学习之BigData常用算法和数据结构 1.Bloom Filter     由一个很长的二进制向量和一系列hash函数组成     优点:可以减少IO操作,省空间     缺点:不支持删除,有 ...

  8. Win10 打开MSDTC

    标签:log   com   http   it   sp   src   c   bs   io 1,Win+R 打开运行窗口,输入 dcomcnfg,打开组件服务窗口 2,在组件服务 catalo ...

  9. Windows10系统下，如何彻底删除卸载MySQL

    本文介绍,在Windows10系统下,如何彻底删除卸载MySQL... 1>停止MySQL服务开始->所有应用->Windows管理工具->服务,将MySQL服务停止.2> ...

  10. 力扣算法题—148sort-list

    Sort a linked list in O(n log n) time using constant space complexity. Example 1: Input: 4->2-> ...