一个简单的AJAX+Node表单提交,出了点问题?!! 求大佬帮忙看一看,感激不尽。!
开始写的时候AJAX还提交过去了,到后面不知道写到什么了,就突然没反应了。
代码可能有点多,但是都有注释,思路也很简单,我把重点代码截图出来,希望大佬们帮忙看一看!!
现在的问题是:
点击这个注册,network显示并没有发出AJAX请求。
登陆regist.ejs:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<style type = "text/css">
body {
padding-top: 100px;
}
#warning {
display: none;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">班级说说</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">全部说说 <span class="sr-only">(current)</span></a></li>
<li><a href="#">我的说说</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">注册</a></li>
<li><a href="#">登陆</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<h1>欢迎注册</h1>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="可以是中文,不能和别人重复">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="password" placeholder="至少六位">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 我遵守注册规定
</label>
</div>
<button type="submit" class="btn btn-default" id = "signup">注册</button>
</form>
<div class="alert alert-danger" role="alert" id ="warning">
用户名被占用,请更换
</div>
</div>
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
// $("input").focus(function(){
// $("#cuowukuang").fadeOut();
// });
$("#signup").click(function(){
//注册按钮的事件,用ajax提交表单
$.post("/doregist",{
"username" : $("#username").val(),
"password" : $("#password").val()
},function(result){
console.log("AJAX成功");
if(result == "1"){
//注册成功
alert("注册成功!将自动跳转到首页");
window.location = "/";
}else if(result == "-1"){
//用户名被占用
$("#warning").fadeIn();
$("#warning").html("用户名被占用啊!");
}else if(result == "-3"){
//服务器错误
}
});
});
</script>
</body>
</html>
这里是没有打印出来的,所以这段代码都没有执行??!
处理表单请求的:router.js:
var formidable = require("formidable");
var db = require("../models/db.js");
var md5 = require("../models/md5.js");
//显示主页
exports.showIndex = function (req,res,next) {
res.render("index",{
"login" : req.session.login == "1" ? true : false,
"username" : req.session.login == "1" ? req.session.username : ""
});
};
//注册页面
exports.showRegist = function (req,res,next) {
res.render("regist");
};
exports.showdoRegist = function (req,res,next) {
//得到用户填写的东西
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
//得到表单之后做的事情
var username = fields.username;
var password = fields.password;
console.log(username + " " + password);
//查询数据库中是不是有这个人
db.find("users",{"username":username},function (err,result) {
if(err) {
//服务器错误
res.send("-3");
return ;
}
if(result.length != 0) {
res.send("-1"); //被占用
return;
}
// console.log(result.length);
//设置md5加密
password = md5(password) + "lawliet";
//现在可以证明,用户名没有被占用
db.insertOne("users",{
"username" : username,
"password" : password
},function (err,result) {
console.log(result);
if(err) {
res.send("-3"); //服务器错误
console.log("错误");
return;
}
req.session.login = "1";
req.session.username = username;
res.send("1");//注册成功,写入session
})
});
//保存这个人
});
}
数据库是插入成功的
入口代码:
var express = require("express");
var app = express();
var router = require("./router/router.js");
var session = require("express-session");
//模版引擎
app.set("view engine","ejs");
// 使用session
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
cookie: { secure: true }
}))
//静态页面
app.use(express.static("./public"));
//路由表
app.get("/",router.showIndex);
app.get("/regist",router.showRegist);
app.post("/doregist",router.showdoRegist);
app.listen(3000);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
是不是页面刷新了,
<button type="submit" class="btn btn-default" id = "signup">注册</button>
改成type="button"
试试.