为什么这个 ajax 发布请求在 Nodejs express 中执行发布请求之前使用数据执行 GET 请求？

Question

我有一个有趣的问题。这是我想使用 ajax 在服务器上执行发布请求的表单。

replyPrefix = "<div id='addCommentContainer'><form class='addCommentForm' name='addcomment' id='addCommentForm'>" +
            "<div class='input-group'>" +
                "<input class='form-control' class='commentContent' type='text' placeholder='Comment!' name='commentContent'>" +
                "<input class='form-control' class='commentParent' type='hidden' name='parent' value='";
replySuffix = "'>" +
                "<span class='input-group-btn'>" +
                    "<button class='btn btn-danger' type='submit' class='submitButton'>submit</button>" +
                "</span>" +
            "</div></form></div>";

（回复的值插入在此表单的前缀/后缀之间。请注意，在我尝试迁移到 ajax 之前，此表单和代码正在执行 post 请求）

这是我执行 ajax 发布请求的 jquery

$('.addCommentForm').submit(function() {

                $.ajax({
                    type: "POST",
                    url: "/addcomment",
                    data: $(this).serialize(),
                    success: function(data) {
                        console.log("success:");
                        //alert(data);
                    },
                    error: function(e) {
                        console.log("error:");
                    }
                });
            });

这里是 nodejs express 代码。

// handle add comment call
router.post('/addcomment', function(req, res) {

//var obj = {};
console.log('body: ' + JSON.stringify(req.body));
//res.send(req.body);

//return;

var db = req.db;
var collection = db.get('comments');

// grab parent id if available
var parent = req.body.parent;
var content = req.body.commentContent;

console.log("parent: " + parent);
console.log("content: " + content);

// if no parent available, add new bubble
if (!parent || parent == "") {
    console.log("Adding a bubble...");
    addBubble(db, collection, content);
}
// otherwise, add comment to tree
else {
    console.log("Adding a comment...");
    addComment(db, collection, content, parent);
}

// DEBUG
//console.log(parent);
//console.log(req.body.commentContent);

//res.redirect('/');
});

通过 ajax 的发布请求正在正确执行，并且回复被添加到数据库和所有内容中，但是当发布请求执行时，页面会不断重新加载，因为每次都会在它之前发送这个 get 请求表单已提交。

body: {"commentContent":"asdf","parent":"55f778aab671e4b41d05c6a7"}
parent: 55f778aab671e4b41d05c6a7
content: asdf
Adding a comment...
GET /?commentContent=asdf&parent=55f778aab671e4b41d05c6a7 200 65.626 ms - 53620
POST /addcomment - - ms - -

（上面是控制台输出，我的问题是为什么这个带有我提交的数据的get请求正在执行？我该如何防止这种情况发生？）

感谢您的帮助。

Answer 1

看起来您正在提交表单和 ajax 请求。尝试添加以下内容以阻止默认提交操作 (GET)。

.submit(function(e) {
  e.preventDefault();
  //ajax code
}