如何使用ajax jquery遍历json响应数据？

Question

我正在尝试使用 ajax jquery 循环遍历 json 响应，但无法显示结果。

这是我使用的代码：

data.php

function platformsList(){
    $query = "SELECT id, name, slug, icon FROM `platforms` ORDER BY id ASC";
    $statement   = $GLOBALS['PDO']->prepare($query);
    $statement->execute();
    $data = array();
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        $data[] = $row;
    }
    return json_encode($data);
}
if(isset($_GET['platforms']) AND $_GET['platforms'] == 'platforms'){
    $platforms = platformsList();
    $response = json_decode($platforms);
    print_r($response);
}

jquery：

$(document).ready(function(){
        $.ajax({
            url: "core/data.php",
            method: "GET",
            data :'platforms=platforms',
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false,
            success: function(response) {
                for(var i = 0; response.length < i; i++) {
                    $('.platformsList').html('<li>'+response.name+'</li>');
                }
            }
        })
    });

我想要的是在下面的 div 中显示结果：

<div>
    <ul class="platformsList"></ul>
</div>

编辑：

当我调试时，我得到了这个结果：

Array
(
    [0] => stdClass Object
        (
            [id] => 1
            [name] =>  Platform 1
            [slug] => dates
            [icon] => dates.webp
        )

    [1] => stdClass Object
        (
            [id] => 2
            [name] => Platform 2
            [slug] => honey
            [icon] => honey.webp
        )
.
.
... etc

Answer 1

您将在每次迭代中替换 .platformsList 的内容。您需要创建缓冲区或使用append()。

success: function(response) {

    let buffer = '';

    for (var i = 0; response.length < i; i++) {

        buffer += '<li>'+response[i].name+'</li>';

    }

    $('.platformsList').html(buffer);

}

Answer 2

请注意 i < response.length 而不是 response.length > i。
和response[i].name 访问数组

success: function(response) {
                for (var i = 0; i < response.length; i++) {
                    $('.platformsList').html('<li>'+response[i].name+'</li>');
                }
            }

Answer 3

1. 不要像那样使用 GLOBALS，而是将其作为参数传递给函数
2. 如果您没有要绑定到查询的参数，则简单的->query() 会更简单快捷。
3. 您想向 AJAX 调用发送 json_encode() JSON 字符串，但您将其解码回 PHP 数组，然后发送 print_r() Javascript 无法理解。

function platformsList($conn){
    $query = "SELECT id, name, slug, icon FROM `platforms` ORDER BY id ASC";
    $result   = $conn->query($query);
    
    $data = $result->fetch_all(MYSQLI_ASSOC);
    
    return $data;
}

if(isset($_GET['platforms']) AND $_GET['platforms'] == 'platforms'){
    $platforms = platformsList($PDO);
    echo json_encode($platforms);
}

而 javascript 需要处理该数组

success: function(response) {
    for(var i = 0; response.length < i; i++) {
        buf += '<li>'+response[i].name+'</li>';
    }
    $('.platformsList').html(buf);
}