Question

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

HTML FORM：

<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

更改调用函数的位置。如果将函数调用绑定到按钮，并且在内部阻止默认操作，则会执行ajax

类似的东西：

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

并在函数的开头

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

preventDefault阻止正常的提交按钮将表单发送为＆＃34;默认＆＃34;并重新加载页面。我认为您的ajax没有被解雇，因为该过程在页面重新加载时开始，您无法看到结果。

Answer 2

createComment是一个内置函数。

Reference : developer.mozilla.org

尝试不同的功能名称。

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

2 个答案: