AJAX jQuery вставить данные без обновления

Question

Хорошо, я понимаю, что есть много других вопросов, которые уже заданы по этой теме, но мне нужна помощь в улучшении моей части кода. Я пытаюсь сделать facebook как систему комментариев, которая работает точно так же, как без обновления страницы. До сих пор у меня есть успешная рука при отправке, если поле комментария не пусто с помощью jQuery. Теперь я также хотел реализовать AJAX здесь. Поэтому я добавил немного больше кода. Но это не работает. Я имею ограниченное знание как jQuery, так и AJAX, которые я буду улучшать во времени, но на данный момент я хочу исправить ошибку. Пожалуйста, исправьте меня с любой ошибкой, которую я сделал в следующем фрагменте кода.

JQuery и AJAX часть:

$(document).ready(function() { 
    $('.commentarea').keydown(function(event) { 
     if($.trim($(".commentarea").val())) { 
      if(event.keyCode == 13) { 
       this.form.submit(function() { 
        var textcontent = $(".commentarea").val(); 
        var dataString = 'content='+ textcontent; 
        $.ajax({ 
         type: "POST", 
         url: "post-comment.php", 
         data: dataString, 
         cache: true, 
         success: function(html){ 
          $("#show").after(html); 
          document.getElementById('content').value=''; 
          $("#flash").hide(); 
          $("#content").focus(); 
         } 
         return false; 
        }); 
       }); 
      } 
      return false; 
     } 
    }); 
}); 

HTML часть:

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width"> 
      <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment"></textarea> 
     </form> 

PHP часть:

<?php 
include('config/db.php'); 
if(isset($_POST['commentarea'])) 
{ 
    $content = (!empty($_POST['comment']))?$_POST['comment']:null; 
    $insert = "INSERT INTO comments(cmt_comment)VALUE(:comment)"; 
    $inserq = $pdo->prepare($insert); 
    $inserq->bindValue(':comment', $content); 
    $inserq->execute(); 
    $lastid = $pdo->lastInsertId(); 

    $sel = "SELECT * FROM comment WHERE cmt_id = :lastid"; 
    $seq = $pdo->prepare($sel); 
    $seq->bindValue(':lastid', $lastid); 
    $seq->execute(); 
    $sef = $seq->fetch(); 

} 
?> 

<div class="showbox"> <?php echo $sef['cmt_comment']; ?> </div> 

Я хочу, чтобы помочь в создании его функции как данные отправляются в post-comment.php и вставлен и отброшен до <div class="showbox"></div> мгновенно без обновления страницы как раз как facebook.

Answer 1

Изменить HTML часть в form оных <div class="showbox"> ниже вашего form как этот

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width"> 
     <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment"></textarea> 
</form>  
<div class="showbox"></div> 

Теперь Вы можете изменять PHP часть, как это:

<?php 
include('config/db.php'); 
if(isset($_POST['commentarea'])) 
{ 
    $content = (!empty($_POST['comment']))?$_POST['comment']:null; 
    $insert = "INSERT INTO comments(cmt_comment)VALUE(:comment)"; 
    $inserq = $pdo->prepare($insert); 
    $inserq->bindValue(':comment', $content); 
    $inserq->execute(); 
    $lastid = $pdo->lastInsertId(); 

    $sel = "SELECT * FROM comment WHERE cmt_id = :lastid"; 
    $seq = $pdo->prepare($sel); 
    $seq->bindValue(':lastid', $lastid); 
    $seq->execute(); 
    $sef = $seq->fetch(); 
    echo $sef['cmt_comment']; //add new line 
} 
?> 

Внимательно следить Script часть. У меня есть изменение jquery.

$(document).ready(function() { 
    $('.commentarea').keydown(function(event) { 
     if($.trim($(".commentarea").val())) { 
      if(event.keyCode == 13) { 
       event.preventDefault(); 
       $("form.full-width").submit(); 
      } 
     } 
    }); 

    $("form.full-width").on('submit', function(e) { 
     e.preventDefault(); 
     var textcontent = $(".commentarea").val(); 
     var dataString = 'content='+ textcontent; 
     $.ajax({ 
      type: "POST", 
      url: "post-comment.php", 
      data: dataString, 
      cache: true, 
      success: function(html){ 
       $("#show").append(html); 
       $("#content").val(''); 
       $("#flash").hide(); 
       $("#content").focus(); 
      } 
     }); 
    }); 
}); 

Answer 2

проверить ваш вызов ajax. Если вы используете сообщение типа, вы должны передать параметр в json. замыкающих следующие изменения

//var dataString = 'content='+ textcontent; 

$.ajax({ 
      type: "POST", 
      url: "post-comment.php", 
      data: {content:textcontent}, 
      cache: true, 
      success: function(html){ 
       $("#show").append(html); 
       $("#content").val(''); 
       $("#flash").hide(); 
       $("#content").focus(); 
      } 
     });