jQuery POSTページを更新する

Question

テキスト入力の値をとり、それをMySQLデータベースに格納するjQueryがあります。しかし、jQueryを実行すると、ページがリフレッシュされ、フォームの変数がURLにGET変数として表示されます。しかし、変数のどれもがGETではありません。理想的には、ページをリフレッシュしないようにしたいと思います。

jQueryの：（PHPからエコー）

$('.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：

<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

GETによるフォーム提出であるEnterキーを押すと、デフォルトのアクションが行われないようにする必要があります。

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); 
       } 
      }); 
     } 
    } 

});