输出 PHP 已编码为 json，并发送到 javascript 为 json，无法正常工作

Question

我正在使用 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 - Black"},{"id":"556903232","name":"Tas LV - Red"},{" 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 它不起作用，输出显示未定义。

Answer 1

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

而且我还可以看到结果是一个数组，因此您需要迭代 obj

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

Answer 2

当我想调用 Php 文件时，我使用 ajax 调用，并从下面的响应中获得响应，尝试一次，如我所示。在使用 Ajax 移动之前，您必须需要将 jquery 导入到调用文件中。

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

步骤如下，

转到 link https://code.jquery.com/jquery-3.6.0.min.js 复制全部内容（使用 ctl+A 到 select 整个内容和 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));
    }
    });
}

希望对您有所帮助，谢谢

Answer 3

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

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

echo json_encode($result);

Answer 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 作为属性.

输出 PHP 已编码为 json，并发送到 javascript 为 json，无法正常工作

Output PHP already encode to json, and send to javascript to be json, not working

html

javascript

php

json

xmlhttprequest