时间戳

首页 > 解决方案 > 如何使用下拉列表中的值向数据库发送请求？

javascript - 如何使用下拉列表中的值向数据库发送请求？

问题描述

所以我有一个下拉列表，它使用选择我所有可用名称的 sql 语句预填充（在页面加载时）。我想要做的是当我点击发送按钮时，它应该取回与我选择的名称相关的所有数据。当我谈到 ajax 请求时，我真的是一个菜鸟，我非常感谢你的帮助。现在我取回数据，但我不确定如何在数据中“搜索”我选择的名称。到目前为止我所拥有的：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        let dropdownMenu = document.getElementById('selected_project');

        function getFilteredData() {
            $.ajax({
                type: 'POST',
                url: 'http://localhost/solid2/filtered_data.php',
                success: function (data) {
                    console.log(data);
                    let name = [];
                    let ertrag = [];
                    let kollektrofläche = [];
                    let jahr = [];
                    let monat = [];
                    for (let i in data) {
                        name.push(data[i].Name);
                        kollektrofläche.push(data[i].Kollektorfläche);
                        ertrag.push(data[i].Ertrag);
                        jahr.push(data[i].Jahr);
                        monat.push(data[i].Monat);
                    }
                    let selectedProjectName = dropdownMenu.options[dropdownMenu.selectedIndex].text;
                    console.log(selectedProjectName);


                    let ctx = document.getElementById('yearly_chart');
                    let yearly_solar_energy = new Chart(ctx, {
                        type: 'bar',

                        // The data for our dataset
                        data: {
                            labels: selectedProjectName,
                            // Information about the dataset
                            datasets: [{
                                label: "Monatliche Solarerträge [kWh/Monat]",
                                backgroundColor: 'orange',
                                borderColor: 'royalblue',
                                data: selectedProjectName
                            }]
                        }
                    }
                })
                }
            });
        }
        function getProjectName() {

        }


    </script>
</head>
<body>
<div>
    <select  id=selected_project name="selected_project">
        <?php
        include 'get_data.php';
        foreach ($result as $row) {
            echo "<option value=$row[ID]>$row[Name]</option>";
        }
        ?>
    </select>
    <button onclick="getFilteredData()">Send</button>
</div>
    <canvas id="yearly_chart"></canvas>


</body>
</html>

这是filtered_data.php

<?php
include 'db_connect.php';

$stmt = $pdo->prepare("
SELECT monitoring_database.systems.display_name AS Name,
monitoring_database.systems.collector_area AS Kollektorfläche,
ROUND(AVG(monitoring_database.heat_meter_values.value))AS Ertrag,
YEAR(monitoring_database.heat_meter_values.timestamp) AS Jahr,
MONTHNAME(monitoring_database.heat_meter_values.timestamp) AS Monat
FROM monitoring_database.systems
INNER JOIN monitoring_database.heat_meter
ON monitoring_database.systems.id = monitoring_database.heat_meter.system_id
INNER JOIN monitoring_database.heat_meter_values
ON monitoring_database.heat_meter.id = monitoring_database.heat_meter_values.heat_meter_id
GROUP BY Name, Jahr
");
$stmt->execute();
$result = $stmt->fetchAll();
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}
print json_encode($data);

标签： javascriptphpsql

解决方案

推荐阅读