鍍金池/ 問答/HTML/ form提交數(shù)據(jù)后如何阻止跳轉(zhuǎn)頁面?

form提交數(shù)據(jù)后如何阻止跳轉(zhuǎn)頁面?

index.ejs

            <div id="registerBox" style="display: none">
                <div class="title">注冊</div>
                <form action="/api/user/register" method="post">
                    <div class="line">
                        <span>用戶名:</span>
                        <input type="text" name="username">
                    </div>
                    <div class="line">
                        <span>密碼:</span>
                        <input type="password" name="password">
                    </div>
                    <div class="line">
                        <span>確認:</span>
                        <input type="password" name="repassword">
                    </div>
                    <div class="line">
                        <input type="submit" name="submit" value="注冊">
                    </div>
                    <div class="line">
                        <p>已有賬號?<a href="javascript:;">馬上登錄</a></p>
                    </div>
                </form>

api.js

api.post('/user/register', async(ctx) => {
    var username = ctx.request.body.username,
        password = ctx.request.body.password,
        repassword = ctx.request.body.repassword;

    //檢測用戶名是否為空
    if(username === ''){
        responseData.code = 1;
        responseData.message = '用戶名不能為空';
        ctx.body = responseData;
        return;
    }

    //檢測密碼是否為空
    if(password === ''){
        responseData.code = 2;
        responseData.message = '密碼不能為空';
        ctx.body = responseData;
        return;
    }

    //檢測密碼是否一致
    if(password !== repassword){
        responseData.code = 3;
        responseData.message = '密碼輸入不一致';
        ctx.body = responseData;
        return;
    }

    //檢測用戶名是否已被注冊
    await new Promise(function(resolve, reject){
        User.findOne({'username': username}, function(err, doc){
            if(doc){
                 //表示數(shù)據(jù)庫中有紀(jì)錄
                 responseData.code = 4;
                 responseData.message = '用戶名已被注冊';
                 resolve(responseData);                
            }else{
                //保存用戶消息到數(shù)據(jù)庫
                var user = new User({'username': username, 'password': password});
                user.save();
                responseData.code = 0;
                 responseData.message = '注冊成功';
                 resolve(responseData);                
            };

            if(err){
                reject(err);
            }
        })
    })
});

表單提交后會切換到/api/user/register頁面,請問如何阻止他跳轉(zhuǎn)頁面并將responseData.message顯示到頁面上?

回答
編輯回答
陌離殤

看你的 下面的js的代碼 估計 是 resolve() 這個函數(shù) 在處理跳轉(zhuǎn) 你試試把這個 注釋 看看能否不跳轉(zhuǎn)

2017年9月17日 14:44
編輯回答
氕氘氚

給<form action="/api/user/register" method="post" onsubmit = "return false"> 加個return false,阻止表單跳轉(zhuǎn) 或者 <input type="submit" name="submit" value="注冊"> 把這里的type="button",這里是submit 所以會自動使表單提交;

2017年11月3日 09:01