Ajax文件在PHP文件中出现1行后无法正常工作

时间:2019-04-21 09:46:41

标签: javascript php html ajax

当我在文件中添加一些行时,我的代码有问题。这是我在ajax中的第一步,我尝试在SQL语句中使用$ _GET变量来仅捕获特定事件的消息。

当前,这是我的文件: chat.php的一部分:

<?php
$id_membre = $_SESSION['id_membre'];
?>
<section class="chat">
    <div class = messages>
    </div>
    <div class="user-input">
        <form action="../src/App/handler.php?task=write" method="POST">
            <input type="hidden" name ="auteur" id="auteur" value="<?php echo $id_membre ?>">
            <input type="hidden" name ="id_event" id="id_event" value="<?php echo $id_event ?>">
            <input type="text" id="message" name="message">
            <button type="submit">Envoyer</button>
        </form>
    </div>
</section>
<script src="../src/JS/chat.js"></script>

chat.js:

function getMessages(){
    const requeteAjax = new XMLHttpRequest();
    requeteAjax.open("GET", "../src/App/handler.php");

    requeteAjax.onload = function(){
      const resultat = JSON.parse(requeteAjax.responseText);
      console.log(resultat);
      const html = resultat.reverse().map(function(mess){
        return `
          <div class="message">
            <span class="date">${mess.date.substring(11, 16)}</span>
            <span class="author">${mess.id_auteur}</span> : 
            <span class="content">${mess.message}</span>
          </div>
        `
      }).join('');

      const messages = document.querySelector('.messages');

      messages.innerHTML = html;
      messages.scrollTop = messages.scrollHeight;
    }

    requeteAjax.send();
  }

  function postMessage(event){
    event.preventDefault();

    const auteur = document.querySelector('#auteur');
    const id_event = document.querySelector('#id_event');
    const message = document.querySelector('#message');

    const data = new FormData();
    data.append('message', message.value);
    data.append('auteur', auteur.value);
    data.append('id_event', id_event.value);

    const requeteAjax = new XMLHttpRequest();
    requeteAjax.open('POST', '../src/App/handler.php?task=write');

    requeteAjax.onload = function(){
      content.value = '';
      content.focus();
      getMessages();
    } 
    requeteAjax.send(data);
  } 
  document.querySelector('form').addEventListener('submit', postMessage);
  const interval = window.setInterval(getMessages, 100);
  getMessages();

handler.php:

<?php
$pdo = new PDO('mysql:host=localhost;dbname=calendrier', 'root', '', [
  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
  PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
]);

$task = "list";

if(array_key_exists("task", $_GET)){
  $task = $_GET['task'];
}

if($task == "write"){
  postMessage();
} else {
  getMessages();
}

function getMessages(){
  global $pdo;

  $resultats = $pdo->query("SELECT * FROM messages ORDER BY date DESC LIMIT 20");
  $messages = $resultats->fetchAll();
  echo json_encode($messages);
}
function postMessage(){
  global $pdo;

  if(!array_key_exists('auteur', $_POST) || !array_key_exists('message', $_POST)){

    echo json_encode(["status" => "error", "message" => "One field or many have not been sent"]);
    return;

  }
  $message = $_POST['message'];
  $auteur = $_POST['auteur'];
  $id_event = $_POST['id_event'];

  $query = $pdo->prepare('INSERT INTO messages SET id_messages_evenement = :id_messages_evenement, id_auteur = :id_auteur , message = :message, date = NOW()');

  $query->execute([
    "id_messages_evenement" => $id_event,
    "id_auteur" => $auteur,
    "message" => $message
  ]);

  echo json_encode(["status" => "success"]);
}

我尝试在表单中执行此操作,以在$ URL中添加$ id_membre

<form action="../src/App/handler.php?task=write&id=<?php echo $id_membre;?>" method="POST">

此后,在handler.php中,我尝试在SQL中使用我的ID:

$id = $_GET['id'];
function getMessages(){
  global $pdo;
  $resultats = $pdo->query("SELECT * FROM messages WHERE id = '$id' ORDER BY date DESC LIMIT 20");

但是什么也没发生。 有人可以向我解释为什么这行不通吗?

谢谢。

0 个答案:

没有答案