使用 jQuery 和 PHP 从 MySQL 数据库查询的 JSON 数据填充 HTML 选择字段
[英]Populate HTML Select Field with JSON data queried from MySQL Database with jQuery and PHP
问题描述
I'm trying to Populate Database Values to an HTML Dropdown Select Field with jQuery.
我正在尝试使用 jQuery 将数据库值填充到 HTML 下拉选择字段。 I found a pretty good example I think if this is the way to go.我找到了一个很好的例子，我认为这是要走的路。 I'm pretty new to jQuery and JavaScript.我对 jQuery 和 JavaScript 很陌生。
Basically, I'm trying the same as the guy here: https://www.electrictoolbox.com/json-data-jquery-php-mysql/ but it is different though.基本上，我正在尝试与这里的人相同： https : //www.electrictoolbox.com/json-data-jquery-php-mysql/但它是不同的。
To keep it on this example, I just need the "Variety" Dropdown, no "Fruit" dropdown.为了保持这个例子，我只需要“Variety”下拉菜单，不需要“Fruit”下拉菜单。 I want to SELECT savename FROM pdfform;我想SELECT savename FROM pdfform; on page load and display the results in the "Lade Datensatz" HTML Dropdown.在页面加载并在“Lade Datensatz”HTML 下拉列表中显示结果。
But all that is Happening is that I get an empty Dropdown like the jQuery isn't executing at all.但发生的一切是我得到一个空的下拉列表，就像 jQuery 根本没有执行一样。 If I call the data.php directly I get JSON Data:如果我直接调用 data.php，我会得到 JSON 数据：
index.html including JavaScript jQuery: 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>
My data.php :我的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); ?>
1 个解决方案
解决方案1
1 已采纳 2019-03-20 13:06:13
I did not pay attention to the jquery you called until you edited your post and add the console log, you're calling the Slim version of jquery which excludes ajax .在您编辑帖子并添加控制台日志之前，我没有注意您调用的jquery ，您调用的是不包括ajax的jquery的Slim版本。 Check this : JQuery issue "TypeError: $.getJSON is not a function"检查这个： JQuery 问题“TypeError: $.getJSON is not a function”
You should take a closer look to your console, the error is very clear : $.getJSON is not a function , you have to call the full version of jquery!你应该仔细看看你的控制台，错误很明显： $.getJSON is not a function ，你必须调用完整版的 jquery ！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.