使用 jQuery 和 PHP 使用从 MySQL 数据库查询的 JSON 数据填充 HTML 选择字段答案

【问题标题】：Populate HTML Select Field with JSON data queried from MySQL Database with jQuery and PHP使用 jQuery 和 PHP 使用从 MySQL 数据库查询的 JSON 数据填充 HTML 选择字段
【发布时间】：2019-03-20 10:44:16
【问题描述】：

我正在尝试使用 jQuery 将数据库值填充到 HTML 下拉选择字段中。我发现了一个很好的例子，我认为如果这是要走的路。我对 jQuery 和 JavaScript 还很陌生。

基本上，我正在尝试与这里的人相同：https://www.electrictoolbox.com/json-data-jquery-php-mysql/，但它是不同的。

为了在这个例子中保留它，我只需要“品种”下拉菜单，没有“水果”下拉菜单。我想在页面加载时 SELECT savename FROM pdfform; 并在“Lade Datensatz”HTML 下拉菜单中显示结果。

但是发生的一切是我得到一个空的下拉菜单，就像 jQuery 根本没有执行一样。如果我直接调用 data.php，我会得到 JSON 数据：

index.html 包括 JavaScript jQuery：

<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body class="bg-light" data-spy="scroll" data-target=".navbar" data-offset="50">
    <div class="container">
        <div class="row">
            <div class="col-md-12 mb-3">
                <form id="LoadForm" name="LoadForm">
                    <h5 class="text-center">Lade Datensatz</h5>
                    <label for="load"></label>
                    <select class="custom-select d-block w-100" id="load" name="load">
                    </select>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        // 1st Try
        // function populatedata() {
        // console.log("populatedata Executed!");
        //     $.getJSON('/data.php',
        //         function(data) {
        //             var select = $('#load');
        //             var options = select.prop('options');
        //             $('option', select).remove();
        //             $.each(data, function(index, array) {
        //                 options[options.length] = new Option(array['savename']);
        //             });
        //         });
        // }

        // 2nd Try
        // function populatedata() {
        //     console.log("populatedata Executed!");
        //     $.getJSON('/data.php',
        //         function(data) {
        //             console.log(data);
        //         });
        // }

        // 3rd Try
        function populatedata() {
            console.log("populatedata Executed!");
            $.getJSON('/data.php');
        }

        // Good for all Trys
        $(document).ready(function() {
            populatedata();
            $('#load').change(function() {
                populatedata();
            });
            $('#load').click(function() {
                populatedata();
            });
        });
    </script>
</body>

</html>

我的data.php：

<?php
    header('Content-Type: text/html; charset=utf-8');
    $dsn = "mysql:host=192.168.17.61;dbname=mvt_test";
    $username = "mvt_test";
    $password = "wqiM7n4POSW1jpJLPM3u2";

    $pdo = new PDO($dsn, $username, $password);

    $rows = array();

    $stmt = $pdo->prepare("SELECT savename FROM pdfform");
    // $stmt = $pdo->prepare("SELECT savename FROM pdfform WHERE name = ? ORDER BY savename");
    // $stmt->execute(array($_GET['savename']));
    $stmt->execute();
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($rows);
?>

控制台日志： Picture

【问题讨论】：

首先，我认为您误解了 PHP 文件中的 $stmt->execute(array($_GET['savename'])); 行。由于您的 sql 请求中没有参数（电动工具箱示例中的 ?），您的行应该是 $stmt->execute();
@abvlle：谢谢。我编辑了主帖。

标签： javascript php jquery html mysql

【解决方案1】：

在您编辑帖子并添加控制台日志之前，我没有注意到您调用的jquery，您调用的是jquery 的Slim 版本，其中不包括ajax。检查这个： JQuery issue "TypeError: $.getJSON is not a function"

你应该仔细看看你的控制台，错误很明显：$.getJSON is not a function，你必须调用完整版的jquery！

【讨论】：

非常感谢，这实际上是最大的问题。它现在正在工作，并进行了一些进一步的调整。下一站：使用从数据库中选择的数据集加载所有 HTML 字段。