Javascript 使用JQuery和Ajax提交表单

我正在进行类似论坛的讨论。可以有几个帖子，用户应该发表评论

我有一个html帖子评论表单，它会在每篇帖子后重复

 <form method="POST" action="/discussion/post-comment" id="post-comment-form" class="form-horizontal subcommentcofrm" role="form">
   <div class = "form-group">
        <div class = "col-sm-6">
            <input type = "text" class = "form-control comment-yako" id = "comment-field" placeholder = "Type your comment here..." autocomplete="off">

        </div>
   </div>
</form>

提交应该在用户点击enter键时进行。 我的问题是，当我按enter键时，表单不会提交。我不知道问题在哪里；我做错了什么

任何帮助都将不胜感激

---

谢谢

您应该在按键处理程序本身中发送AJAX请求，而不是在按键发生后绑定的提交处理程序中。大多数情况下，将一个事件处理程序绑定到另一个事件处理程序是错误的；如果你发现自己在这样做，仔细想想这是否真的是你想做的

除此之外，我还将.live通话改为.on。我还将.serializeArray更改为.serialize，因为这是发送表单字段的正常方式

$(document).on('keypress', 'input.comment-yako', function(e) {
    if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
        console.log('heey');
        var form = $(this).closest('form');
        var data = form.serialize();
        var url = form.attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: data,
            success: function(data) {
                var item = $(data).hide().fadeIn(800);
                $('.disc-content-reply').append(item);
            },
            error: function(e) {
                alert(e);
            }
        });
        e.preventDefault();
        $(this).val("");
        return false;
    } else {
        return true;
    }
});

---

除非您使用的是非常旧的jQuery版本，否则不要使用.live。它在1.7中被弃用，在1.9中被删除。您应该改为使用.on.u是否在浏览器控制台上看到任何错误？您的按键事件处理程序不会发送AJAX请求。它所做的只是绑定一个发送AJAX请求的提交处理程序。在用户单击submit按钮之前，它不会运行，但是没有。$post comment form.submitfunction{…}可以工作，甚至可以在表单输入字段中输入击键，无需检查关键字key@Barmar当我替换.live with.on时，它会在重新加载浏览器的地方进行正常提交。您应该额外修复打字错误。以陈述的形式…吸引；但是，表单尚未序列化@Barmar您的输入字段缺少name属性。这是$u POST键所需的。@Barmar再次感谢。我不认为这是必要的

$(document).on('keypress', 'input.comment-yako', function(e) {
    if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
        console.log('heey');
        var form = $(this).closest('form');
        var data = form.serialize();
        var url = form.attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: data,
            success: function(data) {
                var item = $(data).hide().fadeIn(800);
                $('.disc-content-reply').append(item);
            },
            error: function(e) {
                alert(e);
            }
        });
        e.preventDefault();
        $(this).val("");
        return false;
    } else {
        return true;
    }
});