使用JQuery和Ajax提交表单

Submit Form With JQuery And Ajax

本文关键字：提交 表单 Ajax JQuery 使用      更新时间：2023-09-26

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

我有这个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>

这是我使用ajax提交的JQuery代码：

    $("input.comment-yako").live('keypress', function(e) {
        if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
            console.log('heey');
             $(this).closest('form').submit(function(e){
                console.log('heeeeeeey');
                var data = $(this).serializeArray();
                var url = $(this).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).closest(".comment-yako").val("");
            return false;
        } else {
            return true;
        }
    });

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

任何帮助都将不胜感激。

感谢

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

除此之外，我还将.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;
    }
});
相关文章：