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. jQuery效果-隐藏与显示 小方块的移除

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  2. 数据结构---Java---String

    1.概述 1.1 源码(JDK1.8) public final class String implements java.io.Serializable, Comparable<String& ...

  3. 理解CSV格式规范（解析CSV必备）

    什么是CSV逗号分隔值(Comma-Separated Values,CSV),其文件以纯文本形式存储表格数据(数字和文本),文件的每一行都是一个数据记录.每个记录由一个或多个字段组成,用逗号分隔.使 ...

  4. 【leetcode】996. Number of Squareful Arrays

    题目如下: Given an array A of non-negative integers, the array is squareful if for every pair of adjacen ...

  5. PHP FILTER_SANITIZE_STRING 过滤器

    定义和用法 FILTER_SANITIZE_STRING 过滤器去除或编码不需要的字符. 该过滤器删除那些对应用程序有潜在危害的数据.它用于去除标签以及删除或编码不需要的字符. Name: " ...

  6. UNP学习 高级I/O函数

    首先为一个I/O函数设置超时,这有三种方法.然后是三个read和write函数的变体: recv和send,他们可以把含有标志的第四个参数从进程传给内核: readv和writev这两个函数可以指定一 ...

  7. 【数据库】一篇文章搞掂：MySQL数据库

    一.安装 使用版本:5.7(2018/08/03 阿里云的云数据库最高支持5.7,所以这里考虑用5.7) 下载版本:MySQL Community Server 5.7.23 下载地址:https:/ ...

  8. TDengine陶建辉 自带聚光灯&BGM的半百少年

    TDengine,这款定位为“专为物联网而生的大数据平台”,引爆了2019年夏天的软件圈. 2019年7月12日,涛思数据宣布将TDengine的内核(存储和计算引擎)以及社区版100%开源. 201 ...

  9. PIL库，图像处理第三方库

    PIL  ---> python imaging library 安装需要安装pillow库,包含了21种类,其中Image类是PIL最重要的一个类,可以通过它来处理图像. Python最常用的 ...

  10. php自带函数大全

    php自带函数大全 http://blog.csdn.net/hopewtc/article/details/6797326   Abs: 取得绝对值.Acos: 取得反余弦值.ada_afetch: ...