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

在form添加更改您的HTML部分<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(); 
      } 
     });