ajax评论未重新提交

Question

大家好。 我的代码工作得很好，但是问题是，当我更改输入字段的值时，它不会将新数据提交到服务器，而是将旧数据重新提交到服务器，这回显了。仅在刷新页面后才提交Nww输入。 Wihich击败了使用Ajax的最初目的。 请有人指出正确的方向。提前致谢。 这是我的代码。

<link rel="stylesheet" href="comment.css">
<div class="l-com" id="l-com">
    <a class="clickComment" href="#">Leave a comment</a>
</div>
<div class="comment-container">
    <p>
       <input type="text" placeholder="Enter your name" id="name">
    </p>
    <p>
        <input type="text" placeholder="Enter your email" id="email">
    </p>
    <p>
       <textarea id="comment" placeholder="Write your comment" rows="7"> 
       </textarea>
    </p>
    <p>
       <button type="submit" id="submitBtn" 
       onclick="showComment();">Post</button>           
    </p>

    </div>
  <div id="comment-result">  
  </div>

JavaScript

    var name = document.getElementById('name').value,
    email = document.getElementById('email').value,
    comment = document.getElementById('comment').value,
    pageUrl = window.location.href,
    lastFsl = pageUrl.lastIndexOf('/'),
    partUrl = pageUrl.substring(lastFsl + 1),
    addrDot = partUrl.indexOf('.'),
    pageLocation = partUrl.substring(0, addrDot),
    webpage = pageLocation.replace(/-/g, '_'),
    leaveAcomm = document.querySelector('.clickComment'),
    commentWrapper = document.querySelector('.comment-container'),
    submitBtn = document.getElementById('submitBtn'),
    request = new XMLHttpRequest(),

    parameters = 'name=' + encodeURIComponent(name) + 
          '&email=' + encodeURIComponent(email) +
          '&comment=' + encodeURIComponent(comment) + 
          '&webpage=' + encodeURIComponent(webpage);

          leaveAcomm.addEventListener('click', ChangeDisplay);
          function ChangeDisplay() {
              elDisplay = commentWrapper.style.display;
              if(elDisplay === 'block') {
                  commentWrapper.style.display = 'none';
              }else {
                  commentWrapper.style.display = 'block';
              }
          }


    function showComment() {
        request.open('POST','comment.handler.php', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form- 
        urlencoded');

        request.onreadystatechange = function () {
        if(request.readyState == 4 && request.status == 200) {
            var commentResult = document.getElementById('comment-result');
            commentResult.innerHTML = request.responseText;
            console.log(request.responseText);
       }

    }

    request.send(parameters);   
}
//php code comment.handler.php

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
$table = $_POST['webpage'];
$date = time();


//connect to the database 

$servername = 'localhost';
$username = 'root';
$password = '';
$db = 'commdb';

    $conn = mysqli_connect($servername, $username,$password, $db);
   if(!$conn) {
       die('could not connect ' . mysqli_connect_error($conn));
   }
$checkTable = "SELECT 1 FROM $table";
$chkTblRun = mysqli_query($conn, $checkTable);
if($chkTblRun !== FALSE) {
    if(!empty($name) && !empty($comment) && !empty($email)){
        $insertComment = "INSERT INTO $table(posterName, email, comment, 
         commentDate) 
         VALUES ('$name', '$email', '$comment', '$date')";
         $insertComRun = mysqli_query($conn, $insertComment);
         $selAll = "SELECT * FROM $table ORDER BY ID DESC";
         $selAllRun = mysqli_query($conn, $selAll);
         while($rows = mysqli_fetch_assoc($selAllRun)) {
            $name_field = $rows['posterName'];
            $comment_field = $rows['comment'];
            $postDate = $rows['commentDate'];

            echo '<section id="commResults">' . '<div id="postName">' . 
            $name_field . 
            '</div>'. '<div id="commenter">' . $comment_field . '</div>' .
            '</section>';
         }
    }
  } else {
        $createTable = "CREATE TABLE $table (" .
        "ID INT NOT NULL AUTO_INCREMENT," .
        "posterName VARCHAR (50) NOT NULL," .
        "email VARCHAR (50) NOT NULL," .
        "comment TEXT NOT NULL," .
        "commentDate TEXT NOT NULL," .
        "PRIMARY KEY (ID)" . 

        ")";

      $crtTblRn = mysqli_query($conn, $createTable);
      if(!$createTable) {
      echo 'could not create table ' . mysqli_error($conn);
     } else {
            if(!empty($name) && !empty($comment) && !empty($email)) {
            $insertComm = "INSERT INTO $table (posterName, email, comment, 
            commentDate)
            VALUES('$name', '$email', '$comment', '$date')";
            $insertComRun = mysqli_query($conn, $insertComm);
            $selAll = "SELECT * FROM $table ORDER BY ID DESC";
            $selAllRun = mysqli_query($conn, $selAll);
            while ($rows = mysqli_fetch_assoc($selAllRun)) {
                  $name_field = $rows['posterName'];
                  $comment_field = $rows['comment'];
                  $postDate = $rows['commentDate'];

                  echo '<section id="commResults">' . '<div id="postName">' . 
                  $name_field . 
                  '</div>' . '<div id="commenter">' . $comment_field . 
                  '</div>' .
                  '</section>';
             }
        }
      }
    }

？>