Question

我一直在努力去理解W3Schools的课程，但它不能以某种方式工作！

我已经对它进行了编辑，以便你们能够更好地完成它。

这是index.html页面：

＆＃13;

<!DOCTYPE html>
<html>
<body>

<h2>Get data as JSON from a PHP file on the server.</h2>

<p id="demo"></p>

<script>
var myObj, i, x, j = "";
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
		myObj = JSON.stringify(this.response);
        myObj1 = JSON.parse(myObj);
		document.getElementById("demo").innerHTML = myObj1.stuid;
		alert(myObj1);
		
    }
};

xmlhttp.open("GET", "sing.php", true);
xmlhttp.send();

</script>

</body>
</html>

＆＃13;

这是sing.php

＆＃13;

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "sacapp";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 
$result = $conn->query("SELECT stuid, stuname, stucourse, stustat, stulyear, stulog FROM stuinfo");
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

＆＃13;

这是myObj1 [{"stuid":"10-00002","stuname":"Meratis, Velino","stucourse":"InfoTech","stustat":"0","stulyear":"4","stulog":"feb 16 2017"},{"stuid":"10-00003","stuname":"Melker, Alana","stucourse":"CivilEngi","stustat":"1","stulyear":"5","stulog":"feb 16 2017"}]

的结果

但是document.getElementById("demo").innerHTML = myObj1.stuid;只返回Undefined答案......这里出了什么问题？

我不知道它到底出了什么问题。有人可以指出任何错误吗？

Answer 1

从sing.php中删除html并仅返回JSON。即使您在浏览器中看到正确的输出，如果您查看源，您也会注意到等标记。你的脚本正在看到这些并失败。

Answer 2

看起来AJAX请求返回HTML，您可以使用警报检查返回的内容，将代码更改为：

if (this.readyState == 4 && this.status == 200) {
    alert(xmlhttp.responseText);
}

如果警告中有HTML，你应该检查一行中sing.php页面的路径是否正确：

xmlhttp.open("GET", "sing.php", true);

Answer 3

更新的答案。

好的，我检查了一切并进行了本地设置。你的代码中有很多错误。

让我们来看看index.html。

看起来应该是这样的。（我在你犯错的地方添加了评论。）

<!DOCTYPE html>
<html>
<body>

<h2>Get data as JSON from a PHP file on the server.</h2>

<p id="demo"></p>

<script>
var myObj, i, x, j = "";
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  console.log(this);
    if (this.readyState == 4 && this.status == 200) {

        myObj = JSON.parse(this.response); //**IT'S 'response' NOT 'responseText' To look at the object data, you can do console.log(myObj) and see what the object looks like. in the developer window**

        document.getElementById("demo").innerHTML = myObj.student_id; //**YOU DON'T HAVE A PROPERTY 'id' BUT YOU DO HAVE 'student_id', again look at the json object in the developer window. **
    }
};

xmlhttp.open("GET", "sing.php", true);
xmlhttp.send();
</script>
</body>
</html>

至于＆＃39; sing.php＆＃39;，因为我没有你的数据库，我创建了自己的数组，以便我可以合并它们因为我认为这是你正在尝试的要做。

<?php

$outp =  array(
  'student_id' => '10-00000',
  'student_name' => 'Breaker M. North',
  'student_course' => 'BSIT',
  'student_stat' => 0,
  'student_log' => 1
);

$outp2 =  array(
  "stu_log" => 2,
  "course_name" => "IT 202",
  "student_id" => "10-00000"
);

echo json_encode(array_merge($outp, $outp2));

?>

当您执行echo json_encode($outp + $outp2);时，您实际上正在创建新阵列并将$outp和$outp2作为单独的值。这就是你拥有[]的原因，你有两个值，而不仅仅是一个。然后你有了undefined，因为你无法访问该属性，而是我们访问了json数组的第一个元素。

另外，您可以使用JOIN on student_id创建一个SQL请求...但这不是问题的一部分。

未知代码错误

3 个答案: