一个简单的AJAX+Node表单提交,出了点问题?!! 求大佬帮忙看一看,感激不尽。!

发布于 2022-09-06 06:26:25 字数 8264 浏览 18 评论 0

开始写的时候AJAX还提交过去了,到后面不知道写到什么了,就突然没反应了。
代码可能有点多,但是都有注释,思路也很简单,我把重点代码截图出来,希望大佬们帮忙看一看!!

现在的问题是:
clipboard.png
点击这个注册,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>&copy; 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>

clipboard.png

这里是没有打印出来的,所以这段代码都没有执行??!

处理表单请求的: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

            })
        });

        //保存这个人

    });
}

clipboard.png
数据库是插入成功的

入口代码:

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一桥轻雨一伞开 2022-09-13 06:26:25

是不是页面刷新了,<button type="submit" class="btn btn-default" id = "signup">注册</button>改成type="button"试试.

type="submit" 会提交保单,表单默认行为会刷新页面,这样你的`ajax`没来得及执行就刷新了。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文