nodejs 静态资源文件与登陆交互
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 静态资源文件与登陆交互的更多相关文章
- Spring MVC 处理静态资源文件
摘要: 三个方案: 1.方案一:激活Tomcat的defaultServlet来处理静态文件 2.方案二: 在spring3.0.4以后版本提供了mvc:resources (需要配置annotati ...
- spring mvc静态资源文件的引用
在页面的<title>下 <link rel="stylesheet" href="<%=request.getContextPath()%> ...
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
- SpringMVC+FreeMarker实现静态资源文件自动添加版本号(md5)
近日切换java开发,开始学习springframework.在实现静态资源文件自动计算版本号的实例时,因为不熟悉框架,走了不少弯路,好在最终解决了问题.这里写篇文章记录一下实现,也希望对大家有些用处 ...
- Django使用模板后无法找到静态资源文件
Django使用模板后无法找到静态资源文件 环境配置 Django版本1.11 python版本3.6.2 前言 在编写Django网站的时候,在涉及模板方面,一些简单的例子都没有问题,但这些例子都有 ...
- 关于IDEA每次修改HTML,Css等静态资源文件都需要重启的设置修改
~ ~ ~ ~ ~ 关于IDEA每次修改HTML,Css等静态资源文件都需要重启的设置修改 最近开始使用IDEA进行项目开发,但是对于每次修改HTML文件中css和js文件之后都必须重启服务这件事表示 ...
- linux下配置nginx使用ftp目录作为静态资源文件的目标目录
1.安装ftp服务,可以直接yum install vsftpd. 2.设置随机启动,chkconfig vsftpd on. 3.启动ftp服务,service vsftpd start. 4.配置 ...
- 如何引用GitHub的静态资源文件 js css
参考:引用GitHub的静态资源文件 有些人说直接用 Github Raw 浏览器不执行是因为返回的 content-type 是 text/plain,这么说不准确.实际上浏览器对 MIME 类型并 ...
- IntelliJ IDEA - 热部署插件JRebel ,对静态资源文件进行热部署?javascript、css、vm文件
IntelliJ IDEA - 热部署插件JRebel ,对静态资源文件进行热部署?javascript.css.vm文件https://blog.csdn.net/feng_pump/article ...
随机推荐
- ida吧
经过IDA反编译后的代码是:int __cdecl Ompress(void *Dst, int a2, int a3, int a4)//dst( [esp+24h][ebp+4h] );a2([e ...
- json_value.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MD_DynamicRelease”不匹配值“MT_StaticReleas
注意版本的提示mD mt 注意动态mfc 还是静态mfc
- 强大的性能监控pidstat
前言 pidstat 可以监控单个任务.比如CPU.内存.IO.上下文切换.详细参考 man pidstat 安装 yum install sysstat 使用 1.监控所有活动进程 pidstat ...
- log4j.xml配置详解(转)
转自:http://willow-na.iteye.com/blog/347340 Xml代码 <?xml version="1.0" encoding="UTF- ...
- Linux xargs 命令
xargs xargs 是给命令传递参数的一个过滤器,也是组合多个命令的一个工具. xargs 可以将管道或标准输入(stdin)数据转换成命令行参数,也能够从文件的输出中读取数据. xargs 也可 ...
- 力扣—— Swap Nodes in Pairs(两两交换链表中的节点) python实现
题目描述: 中文: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, ...
- STM32串口USART通信总结
一.GPIO设置USART的初始化 /**************************实现函数******************************************** *函数原型: ...
- axios拦截设置和错误处理
目前想出的处理接口请求进行全局错误提示 的最佳方案,axios整体配置如下 1.基于axiso.interceptors进行响应拦截: 主要负责全局提示错误 axios.interceptors.re ...
- 2018icpc南京/gym101981 G Pyramid 找规律
题意: 数一个金字塔里面有多少个正三角形. 题解: ans[n]=n*(n-1)*(n-2)*(n-3)/24 #include<bits/stdc++.h> using namespac ...
- cs224d 作业 problem set2 (二) TensorFlow 实现命名实体识别
神经网络在命名实体识别中的应用 所有的这些包括之前的两篇都可以通过tensorflow 模型的托管部署到 google cloud 上面,发布成restful接口,从而与任何的ERP,CRM系统集成. ...