javascript - 为什么 XHR 成功并在 chromeDevTools 中显示但未定义且无法由 JSON.parse() 解析
问题描述
这是脚本:
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.ini 结尾返回的内容。
<?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 输出结果时,我得到“未定义”。当我尝试用“JSON.parse()”解析它时,它给了我一个语法错误,说数据的“第 1 行第 1 列有一个意外的表达式”。
我不明白这一点,特别是因为我之前在网站的其他部分使用过相同的脚本代码。在那里,这个问题从未出现过。
解决方案
我认为您data
在.then((data) => {
data = JSON.parse(data)
块中未定义,因为此“then”附加到对 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;
推荐阅读
- javascript - html5 音频播放器:从/到曲目播放
- java - 如何针对新项目问题调整 Intellij 配置?
- python - 如何正确覆盖 TestCase.assertEqual(),产生正确的堆栈跟踪?
- language-agnostic - 将 CSV 文件读入二维数组的合理最高速度是多少?
- php - 无法发布contactform.php
- node.js - Heroku 构建失败 - 推送被拒绝,无法编译 node.js 应用程序,无法缩小包,许多错误
- mysql - 创建索引后查询很快,但几分钟后查询很慢 MySQL
- javascript - MERN堆栈推送到heroku:![remote denied] master -> master (pre-receive hook denied)
- typescript - 按属性类型提取值
- android - ionic cordova build --prod --release 失败并产生错误