Question

我正在建立一个在线网络应用程序，学生可以在这里注册多个研讨会。当学生从下拉列表中选择一个研讨会时，我会激活一个AJAX请求，从我的数据库中选择研讨会详细信息。为了连接/查询我的数据库，我使用PHP PDO。

ajax.handler.js

 $("#trainingDropDown").change(function() {
       var dropDownValue = $(this).val();
       $(".accordion").empty();

        $.ajax({
            type: "POST",
            data: {
                trainingName: dropDownValue
            },
            url: "pages/display_trainingen.php",
            dataType: "json",
            async: true,
            success: function(data) {
                alert(data);
            }
        });
});

当我提醒数据时，我得到[object Object],[object Object]

display_trainingen.php

<?php
    require_once ("../classes/DBConnection.class.php");
    $dbConnection = new DatabaseConnection();

    $selectDetails = $dbConnection->dbConnection->prepare("SELECT idTraining, REPLACE(trainingName, ' ','') AS trainingName, DATE_FORMAT(trainingDay,'%d-%m-%Y') trainingDay, trainingStartTime, trainingEndTime, trainingClassRoom, trainingInfo FROM tbl_trainings WHERE trainingName = :trainingName");
    $selectDetails->bindParam(":trainingName", $_POST["trainingName"]);
    $selectDetails->execute();
    $selectDetailsArray = $selectDetails->fetchAll(PDO::FETCH_ASSOC);

    $jsonResult = json_encode($selectDetailsArray);
    echo $jsonResult;
?>

结果JSON

[
    {
        "idTraining": "1",
        "trainingName": "Meerzelfvertrouwen",
        "trainingDay": "06-01-2015",
        "trainingStartTime": "09:00:00",
        "trainingEndTime": "11:00:00",
        "trainingClassRoom": "A0.040",
        "trainingInfo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue"
    },
    {
        "idTraining": "2",
        "trainingName": "Meerzelfvertrouwen",
        "trainingDay": "12-01-2015",
        "trainingStartTime": "09:00:00",
        "trainingEndTime": "11:00:00",
        "trainingClassRoom": "A0.041",
        "trainingInfo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue"
    }
]

我的问题是如何循环我的JSON结果，以便我得到一个很好的<ul>，每个JSON对象都包含所有值？我对我的代码有任何建议我很乐意听到它们！：）

Answer 1

返回的数据会被序列化回一个数组，因此可以使用标准的for循环来迭代它。从那里，您可以使用标准的jQuery方法来创建ul和li元素：

success: function(data) { 
    for (var i = 0; i < data.length; i++) {
        var $ul = $('<ul />');
        $('<li />', { text: data[i].idTraining }).appendTo($ul);
        $('<li />', { text: data[i].trainingName }).appendTo($ul);
        $('<li />', { text: data[i].trainingDay }).appendTo($ul);
        $('<li />', { text: data[i].trainingStartTime }).appendTo($ul);
        $('<li />', { text: data[i].trainingEndTime }).appendTo($ul);
        $('<li />', { text: data[i].trainingClassRoom }).appendTo($ul);
        $('<li />', { text: data[i].trainingInfo }).appendTo($ul);
        $ul.appendTo('#myContainer');
    }
}

Example fiddle

如何正确循环我的JSON结果？

1 个答案: