使用 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
   )
 );