时间戳

首页 > 解决方案 > 使用 jQuery 和 PHP 使用从 MySQL 数据库查询的 JSON 数据填充 HTML 选择字段

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

问题描述

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

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

为了在这个例子中保留它，我只需要“Variety”下拉菜单，没有“Fruit”下拉菜单。我想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>

我的数据.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);
?>

控制台日志： 图片

标签： javascriptphpjqueryhtmlmysql

解决方案

jquery在您编辑帖子并添加控制台日志之前，我没有注意您调用的内容，您调用的是excludes的Slim版本。检查： JQuery 问题“TypeError：$.getJSON 不是函数”jqueryajax

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

推荐阅读