Почему мой новый контент не отображается / исчезает на странице сразу, а после обновления вручную?

Question

Я отправляю запросы в базу данных через AJAX с vanilla JS. Данные записываются в базу данных без проблем. Я не могу видеть содержимое, помещаемое в базу данных, пока не обновлю страницу. То же самое происходит, когда я удаляю контент, мне нужно обновить его, чтобы увидеть, что контент исчез.

Я прочитал и посмотрел несколько учебных пособий, в которых говорится, что делать, и, похоже, я не вижу ошибки в своем коде. Я могу нажать кнопку и загрузить «временный» код на лету, но когда я включаю базу данных, я не могу воссоздать ту же функциональность.

JavaScript

function postMessage(name, message){
      var author = document.getElementById(name).value;
      var message = document.getElementById(message).value;

      var xhr = ajaxObj("POST", location.href);
      xhr.onreadystatechange = function(){
        if(ajaxReturn(xhr) == 'posted'){
          var currentHTML = document.getElementById('comments').innerHTML;
          document.getElementById('comments').innerHTML = '<div id="post_'+id+'"><p>'+author+' : '+'</p><p>'+message+'</p><button id="message_'+id+'" onclick="deleteMessage('+id+')">Delete Message</button>' + data;
          document.getElementById(message).value = '';
        }
      }
      xhr.send("action=postMessage&author="+author+"&message="+message);
    }

HTML / PHP

<form class="" action="index.html" method="post">
      <input type="text" name="name" id="name" value="" placeholder="Name"><br/>
      <textarea name="message" id="message" rows="8" cols="80"></textarea><br/>
      <button type="button" name="button" onclick="postMessage('name', 'message')">Post Message</button>
    </form>
    <div id="comments">
      <?php
      if(isset($_POST['action']) && $_POST['action'] == 'postMessage'){
        $author = $_POST['author'];
        $message = $_POST['message'];
        $sql = "INSERT INTO comments (author, message) VALUES ('$author', '$message')";
        $db_link->query($sql);
        $db_link->close();
        return "posted";
        exit();
      }
      $all_posts = $db_link->query("SELECT * FROM comments");
      while($post = $all_posts->fetch_assoc()){
        $author = $post['author'];
        $message = $post['message'];
        $date = $post['entered'];
        $post_id = $post['id'];
        $new_post .= "<div id='post_'$post_id>
        <p>$author : $date</p>
        <p>$message</p>
        <button id='message_$post_id' onclick='deleteMessage($post_id)'>Delete Message</button>";
      }
      echo $new_post;
      ?>
    </div>

Запрос успешно выполняется в базе данных, но я не вижу нового div с сообщением, пока не обновлю страницу вручную. Нет ошибок, зарегистрированных в коде PHP или в консоли для JS.

Answer 1

Создайте новый файл для отправки данных, таких как save.php

и используйте xhr.onload, чтобы проверить, успешно ли выполнено или нет

function postMessage(name, message){
    var author = document.getElementById(name).value;
    var message = document.getElementById(message).value;

    var xhr = ajaxObj("POST", 'save.php');

    xhr.onload = function () {
        var currentHTML = document.getElementById('comments').innerHTML;
        document.getElementById('comments').innerHTML = '<div id="post_'+id+'"><p>'+author+' : '+'</p><p>'+message+'</p><button id="message_'+id+'" onclick="deleteMessage('+id+')">Delete Message</button>' + data;
        document.getElementById(message).value = '';

    };

    xhr.send("save.php/action=postMessage&author="+author+"&message="+message);
}