为什么XHR成功并显示在chromeDevTools中，但未定义并且无法通过JSON.parse（）解析

Question

here's the script:

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

What is returned from "getRequests.php" is markup in JSON. Just for Reference, I'll post the backend code so you can look up what is put into the response. "$result" is what is returned at the end of the 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("dmy",strtotime($row["anfang"]))."</td><td>" .date("dmy",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); } } ?> 

In the chromeDevTools, the response is displayed correctly as HTML elements ("" and the like). However, when I try to output the results via console.log I get "undefined". When I try to parse it with "JSON.parse()" it gives me a syntax error saying that there was an "unexepected expression at line 1 column 1" of the data.

I don't understand this, especially since I used the very same script code before in other parts of the site. There, this problem never appeared.

Answer 1

I think you get undefined for data in the .then((data) => { data = JSON.parse(data) block because this "then" is attached to the call to getLoggedUser, not getRequests. So it receives a different response (and also probably executes before getRequests has completed).

So you need to do two things

1) Attach your callback to the correct AJAX call

2) stop trying to use JSON to try and wrap around HTML. What you're passing to json_encode() isn't JSON, and there's no need for it to be - just return the HTML as a string and append it directly to your 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:

Simply replace

echo json_encode($result);

with

echo $result;