第一步前端写一个ajax,发送注册的账号和密码:
封装ajax:
function ajax(option){
var ajax = new XMLHttpRequest();
// 判断请求类型
if(option.type == 'get'){
ajax.open(option.type, option.url+'?' + jsonToString(option.data), true);
ajax.send();
}else if(option.type == 'post'){
ajax.open(option.type, option.url, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(jsonToString(option.data));
}
// 请求状态
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status >= 200 && ajax.status < 300 || ajax.status == 304){
option.success(ajax.responseText)
}else{
option.error();
}
}
};
// 把data的json数据转换为ajax发送的格式
function jsonToString(json){
var arr = [];
for(var i in json){
arr.push(i + "=" + json[i]);
}
return arr.join("&");
}
}
发送数据到后台:
1、html注册框
<input type="text" id="userName" placeholder="请输入用户名"/>
<br />
<input type="text" id="password" placeholder="请输入密码"/>
<br />
<button type="button" id="btn_reg">注册</button>
<button type="button" id="btn_login">登录</button>
2、ajax发送数据
// 注册
btn_reg.onclick = function(){
ajax({
type:'get',
url:'http://localhost:9527/',
data:{
userName:userName.value,
password:password.value
},
success:function(data){
alert(data)
},
error:function(){
console.log("服务器错误!");
}
});
};
// 登录
btn_login.onclick = function(){
ajax({
type:'get',
url:'http://localhost:9528/',
data:{
userName:userName.value,
password:password.value
},
success:function(data){
alert(data)
},
error:function(){
console.log("服务器错误!");
}
});
};
node后台:
var http = require("http"),
urlLib = require("url");
var allDate = {};
http.createServer(function(request, response){
response.setHeader("Access-Control-Allow-Origin","*"); // 允许跨域
var url = request.url; // 获取url
var json = urlLib.parse(request.url,true).query; // 获取url后get请求的参数
// 注册
if(allDate[json.userName]){
response.write("用户名已注册!");
}else{
response.write("注册成功!");
allDate[json.userName] = json.password;
}
response.end();
}).listen(9527);
http.createServer(function(request, response){
response.setHeader("Access-Control-Allow-Origin","*"); // 允许跨域
var url = request.url; // 获取url
var json = urlLib.parse(request.url,true).query; // 获取url后get请求的参数
// 登录
if(allDate[json.userName] == json.password){
response.write("登录成功!");
}else{
response.write("用户名或密码错误,登录失败!");
}
response.end();
}).listen(9528);