输出PHP已经编码为json，并发送到javascript为json，不起作用答案

【问题标题】：Output PHP already encode to json, and send to javascript to be json, not working输出PHP已经编码为json，并发送到javascript为json，不起作用
【发布时间】：2021-11-12 18:54:28
【问题描述】：

我正在使用 json_encode 输出以发送到 javascript，使用此代码。

<?php

    include "Connection.php";

    $syntax_query = "select * from product";

    $thisExecuter = mysqli_query($conn, $syntax_query);

    $result = array();

    while($row = mysqli_fetch_assoc($thisExecuter)){
        
        array_push(
            $result,
            array(
                "id"       => $row["product_id"],
                "name"        => $row["product_name"]
            )
        );
    }

    echo json_encode($result);

    ?>

所以输出显示如下，

[{"id":"121353568","name":"Baju Casual - 黑色"},{"id":"556903232","name":"Tas LV - 红色"},{"id" :"795953280","name":"剑-木"},{"id":"834032960","name":"滑板车-铁板"}]

像这样编写javascript代码

function showHint() {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
        var obj = this.responseText;
        
        document.getElementById("txtHint").innerHTML = obj.id;
    }
  xmlhttp.open("GET", "Download.php");
  xmlhttp.send();
}

所以 obj.id 不起作用，输出显示未定义。

【问题讨论】：

标签： javascript php html json xmlhttprequest

【解决方案1】：

当我想调用一个 Php 文件并从以下相同的地方获得响应时，我会使用 ajax 调用来尝试一次，正如我所展示的那样。在使用 Ajax 之前，您必须需要将 jquery 导入到调用文件中。

如果导入了 Jquery，则忽略这些步骤

这里是步骤，

转到链接https://code.jquery.com/jquery-3.6.0.min.js复制全部内容（使用ctl+A选择全部内容，ctl+C复制）
在当前项目文件夹中打开一个新文件，粘贴复制的内容（使用ctl+V粘贴）另存为'jquery-3.6.0.min.js'
在script标签中导入html文件中的js文件如图'

现在，这是调用 PHP 文件并获得响应的 ajax 示例

function showHint() {
//since you have used GET method I have used here GET but You can use POST also here 
 $.ajax({
    url: 'Download.php',
    type: 'get',
//if any value you want to pass then uncomment below line
//    data: {'name_to_pass':'value'}, 
//the variable can be accessed in the php file by 'name to pass' under $_GET['name_to_pass'] or $_POST['name_to_pass'] based on type
    success: function(res)
    {
      //  open DevTool console to see results
      console.log(JSON.parse(res));
    }
    });
}

希望对你有帮助，谢谢

【讨论】：

【解决方案2】：

也许您需要在响应中使用 JSON.parse，例如 JSON.parse(this.responseText)。

而且我可以看到结果是一个数组，所以你需要迭代 obj

obj.forEach(item => { 
  document.getElement("txtHint").innerHTML = item.id;
});

【讨论】：

仍然无法正常工作 T.T，但感谢您的回答

【解决方案3】：

您应该将响应类型定义为 json

header('Content-Type: application/json; charset=utf-8');

echo json_encode($result);

【讨论】：

【解决方案4】：

function showHint() {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
        **var obj = this.responseText;**
        
        document.getElementById("txtHint").innerHTML = obj.id;
    }
  xmlhttp.open("GET", "Download.php");
  xmlhttp.send();
}

当您获得 responseText 时，它是文本，而不是对象。 var obj = this.responseText; 应该是 let obj = JSON.parse(this.responseText); 然后您可以将 obj.id 作为属性访问。

【讨论】：