javascript - 将 PHP 数组数据发送到 javascript

Question

我有一个 PHP 函数，正在查询 mySQL 数据库，我需要将该查询中的数据发送到 JavaScript 函数，以便可以在绘图中使用数据。我能够在 PHP 中查询数据并获取我需要的信息，但是当我尝试获取 javascript 文件中的信息时，它显示 NULL。这是我的代码，其中包含有关我所得到的内容的注释。

PHP 函数:

function getCourses() {
    $conn = getDBConn();
    $query = "SELECT course_id FROM TraineeEventCourses GROUP BY course_id;";
    $result = mysqli_query($conn, $query) or die('Error connecting to mysql');

    while ($row = mysqli_fetch_assoc($result)) {
        foreach ($row as $courseID) {
            $course = $courseID;
            print_r($course); 
            echo "<br>";   // Print's 1 2 3 4 8 9 10 as expected 
            // return $course;
        }
    }
    // print_r($course); 
    // echo "<br>"; // When not commented out this goes with the return statement but it only returns 10 for some reason instead of returning the whole array. 
}

Javascript:

var courses = "<?php echo json_encode($course, JSON_PRETTY_PRINT) ?>";

            console.log(courses); // Returns NULL but should be returning 12348910

            TESTER = document.getElementById('tester');
            Plotly.plot( TESTER, [{
                x: [courses],
                y: [courses] }],
                { margin: { t: 0 } } );

Answer 1

您需要将所有类(class) ID 放入一个数组中，并从函数中返回它。

也不需要 foreach 循环。 $row 是一个包含单个元素的数组，您可以通过数组索引直接访问它。

function getCourses() {
    $conn = getDBConn();
    $query = "SELECT course_id FROM TraineeEventCourses GROUP BY course_id;";
    $result = mysqli_query($conn, $query) or die('Error connecting to mysql');
    $courses = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $course = $row['course_id'];
        print_r($course); 
        echo "<br>";   // Print's 1 2 3 4 8 9 10 as expected 
        $courses[] = $course;
    }
    return $courses;
}

$course = getCourses();
?>
<script>
var courses = "<?php echo json_encode($course, JSON_PRETTY_PRINT) ?>";
console.log(courses); // Returns NULL but should be returning 12348910

TESTER = document.getElementById('tester');
Plotly.plot( TESTER, [{
    x: [courses],
    y: [courses] }],
  { margin: { t: 0 } } );