Question

我有一些jQuery获取文本输入的值并将其放入MySQL数据库。但是，当jQuery运行时，页面刷新，表单中的变量几乎作为GET变量出现在URL中。但是，没有变量是GET。理想情况下，我希望页面不要刷新。

jQuery的：

$('.commentBox').keypress(function(e) {

    if(e.which == 13) {
        if ($.trim($(this).val()) == ""){
            $('#nocomment').modal('show');
        }
        else {
            var form = $(this).siblings('.commentForm'); 
            var commentbox = $(this).val();

            $.ajax({
                type: "POST",
                url: "../comment",
                data: form.serialize(),
                success: function(){
                    commentbox.val('');
                    form.siblings('.commentContainer').append(response);
                } 
            });
        }
    }

});

HTML（来自PHP）：

<form class='commentForm'>
    <input type='hidden' name='record_id' value='$answerid[$f]' />
    <input type='hidden' name='question_id' value='$q' />";
    <input type='text' class='commentBox' placeholder='...comment' name='comment' autocomplete='off' />";
</form>

Answer 1

您必须返回false或阻止默认，这将阻止表单提交：

$('.commentBox').keypress(function(e)
{
    if(e.which == 13)
    {
        e.preventDefault(); // <-- This will stop the form from submitting.

        if ($.trim($(this).val()) == "")
        {
            $('#nocomment').modal('show');
        }
        else
        {
            var form = $(this).closest('.commentForm');
            var commentbox = $(this).val();
            $.ajax({
                type: "POST",
                url: "../comment",
                data: form.serialize(),
                success: function(){
                    commentbox.val('');
                    form.siblings('.commentContainer').append(response);
                }
            });
        }
    }
});

Answer 2

您需要阻止在按Enter键时发生默认操作，即通过GET提交表单。

e.preventDefault();

$( '.commentBox' ).keypress(function( e ) {

    if( e.which === 13 ) {

        // Prevent the default only when it's the enter key
        e.preventDefault();

        if ( $.trim($(this).val()) === '' ){
            $('#nocomment').modal( 'show' );
        }
        else {
            var form = $( this ).siblings( '.commentForm' ); 
            var commentbox = $( this ).val();

            $.ajax({
                type: "POST",
                url: "../comment",
                data: form.serialize(),
                success: function(){
                    commentbox.val( '' ;
                    form.siblings( '.commentContainer' ).append( response );
                } 
            });
        }
    }

});

jQuery POST刷新页面

2 个答案: