在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 一個(gè)簡(jiǎn)單的AJAX+Node表單提交，出了點(diǎn)問(wèn)題？!! 求大佬幫忙看一看，感激不

一個(gè)簡(jiǎn)單的AJAX+Node表單提交，出了點(diǎn)問(wèn)題？!! 求大佬幫忙看一看，感激不盡。！

開(kāi)始寫(xiě)的時(shí)候AJAX還提交過(guò)去了，到后面不知道寫(xiě)到什么了，就突然沒(méi)反應(yīng)了。
代碼可能有點(diǎn)多，但是都有注釋，思路也很簡(jiǎn)單，我把重點(diǎn)代碼截圖出來(lái)，希望大佬們幫忙看一看??！

現(xiàn)在的問(wèn)題是：
clipboard.png
點(diǎn)擊這個(gè)注冊(cè)，network顯示并沒(méi)有發(fā)出AJAX請(qǐng)求。

登陸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個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link  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="#">班級(jí)說(shuō)說(shuō)</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">全部說(shuō)說(shuō) <span class="sr-only">(current)</span></a></li>
                <li><a href="#">我的說(shuō)說(shuō)</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">注冊(cè)</a></li>
                <li><a href="#">登陸</a></li>
            </ul>
        </div><!--/.navbar-collapse -->
    </div>
</nav>


<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <h1>歡迎注冊(cè)</h1>
        <form>
            <div class="form-group">
                <label for="username">用戶名</label>
                <input type="text" class="form-control" id="username" placeholder="可以是中文，不能和別人重復(fù)">
            </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"> 我遵守注冊(cè)規(guī)定
                </label>
            </div>
            <button type="submit" class="btn btn-default" id = "signup">注冊(cè)</button>
        </form>

        <div class="alert alert-danger" role="alert" id ="warning">
            用戶名被占用，請(qǐng)更換
        </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(){
        //注冊(cè)按鈕的事件，用ajax提交表單
        $.post("/doregist",{
            "username" : $("#username").val(),
            "password" : $("#password").val()
        },function(result){
            console.log("AJAX成功");
            if(result == "1"){
                //注冊(cè)成功
                alert("注冊(cè)成功！將自動(dòng)跳轉(zhuǎn)到首頁(yè)");
                window.location = "/";
            }else if(result == "-1"){
                //用戶名被占用
                $("#warning").fadeIn();
                $("#warning").html("用戶名被占用??！");
            }else if(result == "-3"){
                //服務(wù)器錯(cuò)誤
            }
        });
    });
</script>

</body>
</html>

clipboard.png

這里是沒(méi)有打印出來(lái)的，所以這段代碼都沒(méi)有執(zhí)行？？！

處理表單請(qǐng)求的：router.js:

var formidable = require("formidable");
var db = require("../models/db.js");
var md5 = require("../models/md5.js");
//顯示主頁(yè)
exports.showIndex = function (req,res,next) {
    res.render("index",{
        "login" : req.session.login == "1" ? true : false,
        "username" : req.session.login == "1" ? req.session.username : ""
    });
};
//注冊(cè)頁(yè)面
exports.showRegist = function (req,res,next) {
    res.render("regist");
};

exports.showdoRegist = function (req,res,next) {
    //得到用戶填寫(xiě)的東西
    var form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
        //得到表單之后做的事情
        var username = fields.username;
        var password = fields.password;
        console.log(username + " " + password);
        //查詢數(shù)據(jù)庫(kù)中是不是有這個(gè)人
        db.find("users",{"username":username},function (err,result) {
            if(err) {
                //服務(wù)器錯(cuò)誤
                res.send("-3");
                return ;
            }
            if(result.length != 0) {
                res.send("-1"); //被占用
                return;
            }
            // console.log(result.length);
            //設(shè)置md5加密
            password = md5(password) + "lawliet";
            //現(xiàn)在可以證明，用戶名沒(méi)有被占用
            db.insertOne("users",{
                "username" : username,
                "password" : password
            },function (err,result) {

                console.log(result);
                if(err) {
                    res.send("-3"); //服務(wù)器錯(cuò)誤
                    console.log("錯(cuò)誤");
                    return;
                }

                req.session.login = "1";
                req.session.username = username;

                res.send("1");//注冊(cè)成功，寫(xiě)入session

            })
        });

        //保存這個(gè)人

    });
}

clipboard.png
數(shù)據(jù)庫(kù)是插入成功的

入口代碼：

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 }
}))



//靜態(tài)頁(yè)面
app.use(express.static("./public"));

//路由表
app.get("/",router.showIndex);
app.get("/regist",router.showRegist);
app.post("/doregist",router.showdoRegist);


app.listen(3000);
回答
編輯回答
安于心

是不是頁(yè)面刷新了，<button type="submit" class="btn btn-default" id = "signup">注冊(cè)</button>改成type="button"試試.

type="submit" 會(huì)提交保單，表單默認(rèn)行為會(huì)刷新頁(yè)面，這樣你的`ajax`沒(méi)來(lái)得及執(zhí)行就刷新了。
2018年5月13日 13:14