之前的思路是页面获取登录名和密码之后,利用Ajax请求传输数据,然后在路由处理里面利用SQL获取数据库数据,进行校验之后利用res.redirect()进行跳转,但是一直出错,出现了好几个问题,下面讲述问题和原因。
1.首先Ajax一般只是用来传输数据,不是用于进行页面跳转
因为Ajax使用之后他是一个完整的一个请求和回调的过程,在这个过程里面只存在一个HTTP表头,如果你重定向就会重复,就会报错。使用Ajax就是在同一个界面的东西,不能重定向到其他界面就打破Ajax的整个请求过程,因为redirect这个函数改变的是Ajax请求中间的定向,这就打破了Ajax整个流程。
所以如果你想做一个登陆界面,那么只有Ajax返回打开下一步的url,然后前端进行调转吧。或者不用Ajax。
2.报错Can’t set headers after they are sent.
例如我在路由处理时候这么写:
// 登陆信息验证
router.all('/test1',function (req,res,next) {
//接收传输过来的邮箱和密码
var username = req.query.username;
var password = req.query.password;
// username 和 password 都是string类型
console.log('a '+typeof(username));
console.log('b '+ password);
// 连接数据库
var connection = mysql.createConnection({ //创建mysql实例
host:'127.0.0.1',
port:'3306',
user:'root',
password:'',
database:'test'
});
connection.connect();
var sql = 'SELECT passwd FROM users where username = ' + username ;
connection.query(sql, function (err,result) {
var result1 = result[0].passwd;
console.log('3'+result1) // 输出3123
if(err){
res.send(500);
console.log('[SELECT ERROR]:',err.message);
}
else{
if(password == result1){
//登陆成功,进行页面的跳转
console.log("登陆成功");
res.send(200);
}else{
res.send(404);
console.log("密码错误");
};
}
});
connection.end();
return res.send(username);
});
就会报错:Can’t set headers after they are sent.
,测试了下不能使用多个res.send(),但是按照网上指示,添加return还是出错,这个问题一直没想到解决方法。
3.使用Ajax跳转
上面虽然说使用Ajax无法直接跳转,但是可以利用Ajax传递数据,利用数据的不同通过判断在前端进行跳转。
server.js
/**
* Created by web-01 on 2018/1/4.
*/
var express=require('express');
var app=express();
var bodyParser=require('body-parser');
var m=require("./init1.js");
var pool=m.pool;
var urlencodedParser=bodyParser.urlencoded({extended:false});
app.use(express.static('public'));
app.get('/',function(req,res){
res.sendFile(__dirname+"/"+"ex9_1.html");
});
app.get('/jquery.min.js',function(req,res){
res.sendFile(__dirname+"/"+"jquery.min.js");
});
app.get('/main',function(req,res){
res.sendFile(__dirname+"/"+"main.html");
});
/*app.get('index.html',function(req,res){
res.sendFile(__dirname+"/"+"index.html");
});*/
app.post('/login',urlencodedParser,function(req,res){
var response={
"uname":req.body.uname,
"upwd":req.body.upwd
};
console.log(response.uname);
var sql="SELECT * FROM t_user WHERE uname=? AND binary upwd=?";//记得加binary区分大小写
pool.getConnection((err,conn)=>{
conn.query(sql,[response.uname,response.upwd],(err,result)=>{
if(result.length>0){
res.json({code:1,msg:"登录成功"});
}else{
res.json({code:-1,msg:"用户名或密码错误"});
}
conn.release();
});
})
//res.end(JSON.stringify(response));
});
app.get('/list',function(req,res){
var sql="SELECT * FROM test";
pool.getConnection((err,conn)=>{
conn.query(sql,(err,result)=>{
if(result.length>0){
res.json(result);
//res.send(result)也可
}else{
res.json({code:-1,msg:"用户名或密码错误"});
}
conn.release();
});
})
});
var server=app.listen(8081,function(){
});
login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
用户名:<input type="text" name="uname" id="uname"><br/>
密码:<input type="password" name="upwd" id="upwd"><br/>
<input type="submit" id="btn_smt" value="提交">
<script src="jquery.min.js"></script>
<script>
btn_smt.onclick=function(){
var uname=$("#uname").val();
var upwd=$("#upwd").val();
$.ajax({
type:"post",
url:"/login",
data:{uname:uname,upwd:upwd},
success:function(data){
if(data.code>0){
alert(data.msg);
location.href="/main";
}else{
alert(data.msg);
}
},
error:function(){
alert("网络故障,请检查");
}
});
}
</script>
</body>
</html>
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<td>tid</td>
<td>tname</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="jquery.min.js"></script>
<script>
$.ajax({
type:"GET",
url:"/list",
success:function(data){
var html="";
for(var i=0;i<data.length;i++){
html+="<tr>";
html+="<td>"+data[i].tid+"</td>";
html+="<td>"+data[i].tname+"</td>";
html+="</tr>";
}
$("tbody").html(html);
},
error:function(){
alert("网络故障,请检查");
}
})
</script>
</body>
</html>
参考文献:
https://segmentfault.com/q/1010000007613619
https://cnodejs.org/topic/53774ffecbcc396349ca1155
https://blog.csdn.net/spfLinux/article/details/78974205
其他可以参考的文章: