Почему XHR успешен и отображается в chromeDevTools, но не определен и не может быть проанализирован JSON.parse ()

Question

вот сценарий:

  function getReq(){
 $.post('../include/getLoggedUser.php', {
  //nothing to transmit
}).then((loggedUser) => {
    $.post("../include/getRequests.php", {
    ID:loggedUser
  })
}).then((data) => {
  data = JSON.parse(data)
  console.log("data for table is", data)
  $("#requestTable").html(data);
})
}

То, что возвращается из "getRequests.php", является разметкой в ​​JSON. Просто для справки, я опубликую бэкэнд-код, чтобы вы могли посмотреть, что помещено в ответ. «$ result» - это то, что возвращается в конце php.

<?php
/*
================================================================================
Wennn diese Datei aufgerufen wird und der Wert "ID" als Int übergeben wurde wird
eine Tabelle, die alle Anfragen anzeigt, zurückgegeben.
================================================================================
*/
  if(isset($_POST["ID"])){
    try{
      $connection = new PDO('mysql:host=localhost;dbname=arbeitsplatzverwaltung',
      'verwalter','N7pY1OTl2gaBbc51');
    }catch(PDOException $e){
      echo $e->getMessage();
    }
    session_start();
    
    $userRole = $connection->query("
      SELECT name
      FROM rolle
      WHERE id = (
        SELECT rolle
        FROM benutzer_rollen
        WHERE benutzer='".$_POST["ID"]."'
      )
    ")->fetchAll()[0][0];
    if($userRole == "admin"){

      
      $result .= "<thead><tr><td>Von</td><td>Bis</td><td>Benutzer</td><td>Raum/Platz
      </td><td>Aktionen</td></tr></thead><tbody>";

      $allReservation = $connection->query("
        SELECT id, anfang, ende, benutzer, arbeitsplatz
        FROM reservierung
        WHERE status='angefragt'
      ")->fetchAll();
      foreach($allReservation as $row){
        $user = $connection->query("
          SELECT name, vorname
          FROM benutzer
          WHERE id='".$row["benutzer"]."'
        ")->fetchAll()[0];
        $position = $connection->query("
          SELECT raum, nummer
          FROM arbeitsplatz
          WHERE ID = '".$row["arbeitsplatz"]."'
        ")->fetchAll()[0];
        $raumbild = $connection->query("
          SELECT bild
          FROM raum
          WHERE name ='".$position["raum"]."'
        ")->fetchAll()[0][0];


        $result .= "<tr><td>".date("d.m.y",strtotime($row["anfang"]))."</td><td>"
        .date("d.m.y",strtotime($row["ende"]))."</td><td>".$user["name"]." "
        .$user["vorname"]."</td><td><a>".$position["raum"]."/"
        .$position["nummer"]."<div><img class=\"hoverImage\"src=\"".$raumbild.
        "\" /></div></a></td><td><div class=\"form-inline form-horizontal\">
        <select id=\"statusDrop".$row["id"]."\" class=\"form-control\">
        <option>genehmigen</option><option>ablehnen</option></select>
        <button class='btn btn-default' onclick=\"submitStatus(".$row["id"].
        ");\">Ok</button></div></td></tr>";
      }
      $result .= "</tbody></table>";
      echo json_encode($result);
    }
  }


?>

В chromeDevTools ответ корректно отображается в виде HTML-элементов ("" и т. П.). Однако, когда я пытаюсь вывести результаты через console.log, я получаю "undefined". Когда я пытаюсь проанализировать его с помощью «JSON.parse ()», возникает синтаксическая ошибка, говорящая о том, что в строке 1 столбца 1 данных было «неожиданное выражение».

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

Answer 1

Я думаю, что вы получите неопределенное значение для data в блоке .then((data) => { data = JSON.parse(data), потому что это "затем" присоединено к вызову getLoggedUser, а не getRequests. Таким образом, он получает другой ответ (и, вероятно, также выполняется до завершения getRequests).

Так что вам нужно сделать две вещи

1) Прикрепите ваш обратный вызов к правильному вызову AJAX

2) прекратите попытки использовать JSON, чтобы попытаться обойти HTML. То, что вы передаете json_encode (), не является JSON, и в этом нет необходимости - просто верните HTML в виде строки и добавьте его непосредственно в ваш HTML.

JS:

function getReq(){
  $.post('../include/getLoggedUser.php', {
    //nothing to transmit
  }).then((loggedUser) => {
    $.post("../include/getRequests.php", {
      ID:loggedUser
    }).then((data) => {
        console.log("data for table is", data)
        $("#requestTable").html(data);
    })
  })
}

PHP:

Просто замените

echo json_encode($result);

с

echo $result;