码迷,mamicode.com
首页 > Web开发 > 详细

nodejs 静态资源文件与登陆交互

时间:2017-11-07 01:36:09      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:word   state   static   char   []   doc   stat   code   send   

server2.js

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

var server=express();
server.listen(63342);

//用户数据
var users={
  mike: 123456,
  jack: 654321,
  luci: 987987
};

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==4){
            clearTimeout(timer);
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                json.success && json.success(oAjax.responseText);
            }else{
                json.error && json.error(oAjax.status);
            }
        }
    };
}

截图:

技术分享

 

效果:
技术分享

 

nodejs 静态资源文件与登陆交互

标签:word   state   static   char   []   doc   stat   code   send   

原文地址:http://www.cnblogs.com/guangzhou11/p/7795936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!