Having trouble with using AJAX to pass data from PHP to JavaScript

Question

Ok, so, first of all, I apologize for the question, but I am fairly new to web development.

I am trying to make a system in which the user can manipulate a database of events. I made it correctly with just php, but right now, I am supposed to add RESTful architecture to what I've already did, so I am trying to make REST API.

I am trying to make an example of it: example.html has a form with the name of an event that will be added to the database when submitted to addEventToDB.php , which is supposed to then return to the html page, but has created an object with whether the operation was successful and the name that was updated. The midPoint.js script should be able to get that object and based on that, create on the html page, a paragraph stating the success of the operation and name of the event. For some reason, this never works and only returns the error Uncaught SyntaxError: Unexpected token < in JSON at position 0 , instead of adding said paragraph.

This is my first experiment, but I think it's the best way to add REST architecture to the project.

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');

I am trying to make sure that this project uses REST and this was the best way that I could think of adding it, but I can't seem to make it work. That js file was supposed to get the data on the JSON file and print the paragraph, but I can't figure out how to make it work.

Answer 1

Your array must be like this to be used by json_encode

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