Возникли проблемы с использованием AJAX для передачи данных из PHP в JavaScript

Question

Хорошо, поэтому, прежде всего, я прошу прощения за вопрос, но я довольно новичок в веб-разработке.

Я пытаюсь создать систему, в которой пользователь может манипулировать базой данных событий. Я сделал это правильно только с помощью php, но сейчас я должен добавить архитектуру RESTful к тому, что я уже сделал, поэтому я пытаюсь создать REST API.

Я пытаюсь привести пример: example.html имеет форму с именем события, которое будет добавлено в базу данных при отправке в addEventToDB.php, которое затем должно вернуться на html-страницу, но создал объект с тем, была ли операция успешной, и с именем, которое было обновлено. Сценарий midPoint.js должен иметь возможность получить этот объект и на его основе создать на html-странице абзац, в котором будет указана успешность операции и имя события. По какой-то причине это никогда не работает и возвращает только ошибку Uncaught SyntaxError: Unexpected token < in JSON at position 0 вместо добавления указанного абзаца.

Это мой первый эксперимент, но я думаю, что это лучший способ добавить REST-архитектуру в проект.

example.html

    <form action="addEventToDB.php" method="post" class="form-group list-group col-6 offset-3">
      <h1 class="display-3"> Add Event </h1>

      <div class="form-group">
        <label for="eventName">Name</label>
        <input type="text" name="eventName" id="eventName" class="form-control" placeholder="Name" aria-describedby="helpId">
      </div>

      <p id="demo">  </p>

      <button type="submit" class="btn btn-primary"> Add </button>
    </form>

midPoint.js

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var responseArray = JSON.parse(this.responseText);

        document.getElementById("demo").innerHTML = responseArray.addResult;
    }
};

xmlhttp.open("GET", "addEventToDB.php", true);
xmlhttp.send();

addEventToDB.php

$eventName = $_POST['eventName'];

if(isset($eventName)){
    $sql = "INSERT INTO evento(`Nome`) VALUES ('{$eventName}')";
    $result = $conn->query($sql);

    if ($result === true) {
        $responseArray->addResult = true;
        $responseArray->uploadValue = $eventName;
    } else {
        $responseArray->addResult = false;
        $responseArray->uploadValue = $eventName;
    }
} else {
    $responseArray->addResult = false;
    $responseArray->uploadValue = $eventName;
}

$myJSON = json_encode($responseArray);

echo $myJSON;

header('Location: experiment.html');

Я пытаюсь убедиться, что этот проект использует REST, и это был лучший способ добавить его, но я не могу заставить его работать. Этот js-файл должен был получить данные из JSON-файла и напечатать абзац, но я не могу понять, как заставить его работать.

Answer 1

Ваш массив должен быть таким, чтобы его использовал json_encode

$responseArray= array(
   'item' => array(
     'addResult' => true,
     'uploadValue' => $eventName
   )
 );