javascript - 表单提交后没有响应，页面只是自动重新加载

Question

我使用ajax来处理提交的表单数据。

HTML 表单:

<div class="well">
<form id='createCommentForm' method='post' onsubmit='createComment();return false;'>
    <h4>Leave a Comment:</h4>
    <div class="form-group">
        <textarea class="form-control" rows="3" name='comment' id='comment'
            placeholder='Please input your comments here ..' ></textarea>
    </div>
    <div class="form-group">
        <input type='text' class="form-control" name='name' id='commenter'
            placeholder='Name of commenter'></input>
    </div>
    <div>
        <input type='text' name='taskId' id='taskId'></input>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

然后我使用下面的代码来处理表单，并最终将值传递回与表单显示位置相同的 HTML 文件中的某个位置。

JS:

function createComment() {
$("#message").html('');
console.log("am i in here?");
var commenter = $("#commenter").val();
var comment = $("#comment").val();
var taskId = $("#taskId").val();
var input = {};
input.commenterName = commenter;
input.message = comment;
input.taskId = taskId;
var inputStr = JSON.stringify(input);
console.log(input);
inputStr = encodeURIComponent(inputStr);
$.ajax({
    url : "/QueueSystem/admin/CreateCommentServlet?input=" + inputStr,
    method : "GET",
    dataType : 'json',
    error : function(err) {
        console.log(err);
    },
    success : function(data) {
        console.log(data);
        var status = data.status;
        var message = data.message;
        if (status == 1) {
            var comment = message;
            COMMENTS.push(comment);
            console.log(comment);
            var commentId = comment.commentId;
            var message = comment.message;
            var html = '\
                <div class="media">\
                    <div class="media-body">\
                        <h4 class="media-heading">' + comment.commenterName + '\
                            <small>' + comment.modifiedDate + '</small>\
                        </h4>'
                        + message +
                    '</div>\
                </div>';

            $("#comments").append(html);

        } else {
            $("#message").html(message);
        }
    }
});

}

我的问题是，当我按下提交时，页面会自动重新加载，并且似乎没有数据被传递，或者可能根本没有调用函数createComment()。我无法调试，因为页面只是自动重新加载，这对我来说很不寻常。

我有这样的猜测，因为当我运行它时，JS 中的第三行甚至没有在控制台上显示任何内容。

但是我通过手动输入URL中的数据来测试我的Servlet，调用成功。所以我怀疑问题出在表单或ajax上。

任何人都可以给我提示或建议或者我的代码可能出错的地方吗？

非常感谢!!

Answer 1

更改调用函数的位置。如果将函数调用绑定(bind)到按钮，并在其中阻止默认操作，ajax 将完成

类似于:

<button type="submit" onclick="createComment(event);" class="btn btn-primary">Submit</button>

在函数的开头

function createComment(event) {
    event.preventDefault();

preventDefault 阻止正常的提交按钮以“默认”方式发送表单并重新加载页面。我认为你的ajax没有被触发，因为进程在页面重新加载时启动，而你只是看不到结果。