Jquery问题将数据发送到php答案

【问题标题】：Jquery issue sending data to phpJquery问题将数据发送到php
【发布时间】：2021-04-28 07:03:19
【问题描述】：

我正在为我学校的一个项目工作，但我的代码有问题。说明：我制作了一个从我的数据库中填充的下拉菜单，它运行良好。在下拉列表中都是带有“ID”的所有“工作站”，所以当我选择一个工作站时，我通过 GET 方法将它发送到我的 data.php 文件，然后创建一个包含来自所选工作站的所有数据的 json 文件数据我创建了几个图表。问题是无论我选择什么工作站，它都只显示预定义的工作站（Station 1）。

这是 jquery 代码，它获取下拉值并将其放入 var dropd 中，然后发送到 data.php 文件。

$(document).ready(function() {
  $("#button1").click(function(){
    var dropd = $("#drop").val();
    console.log(dropd);
    $.getJSON('data.php', {id: dropd});
      function grab() {
        return new Promise((resolve, reject) => {
        $.ajax({
            url: "data.php",
            method: "GET",
            success: function(data) {
            },
            error: function(error) {
                reject(error);
            }
        });
    });
}

grab().then((data) => {
    console.log('Recieved our data', data);
    let Zeit = [];
    let Luft = [];

    try {
        data.forEach((item) => {
            Zeit.push(item.Zeit);
            Luft.push(item.Luftfeuchtigkeit);
        });

        let chartdata1 = {
            labels: [...Zeit],
            datasets: [{
                label: 'Luftfeuchtigkeit',
                backgroundColor: 'rgba(200, 200, 200, 0.75)',
                borderColor: 'rgba(200, 200, 200, 0.75)',
                hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                hoverBorderColor: 'rgba(200, 200, 200, 1)',
                data: [...Luft]
            }]
        };

        let ctx = $("#myChart1");

        let barGraph = new Chart(ctx, {
            type: 'line',
            data: chartdata1
        });

    } catch (error) {
        console.log('Error parsing JSON data', error);
    }

}).catch((error) => {
    console.log(error);
});

这是我的 data.php 文件，它为我的图表创建 json 文件。

 <?php
header('Content-Type: application/json');

$conn = mysqli_connect("localhost","root","","usera01");
$id = isset($_GET['dropd']) ? $_GET['dropd'] : false;
   if ($id) {
      //echo ($_GET['dropd']);
   } else {
     $id = 1;
   }

$sqlQuery = "SELECT idDatenNr, Luftfeuchtigkeit, Lichtverhältnis, Bodenfeuchtigkeit,Temperatur, Zeit, fi_idStation FROM daten WHERE fi_idStation = '$id'";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
 $data[] = $row;
}

mysqli_close($conn);

echo json_encode($data);
?>

对不起，如果它看起来有点乱，但我对 jquery 和 php 很陌生。谢谢。

这是我的图表的完整代码，包括选择。

<select id ="drop">
  <option disabled selected>--Wähle Station aus--</option>
  <?php
    $records = mysqli_query($db, "SELECT idStation, Stationname FROM station WHERE fi_idFirma = $id");
      while($data = mysqli_fetch_array($records))
       {
         echo "<option value='".$data['idStation']."'>" .$data['Stationname']."</option>";
       }
  ?>
</select>
           <button id="button1">Lade Tabelle</button>
<div>
<canvas id="myChart1"></canvas>
</div>
<div>
<canvas id="myChart2"></canvas>
</div>
<div>
<canvas id="myChart3"></canvas>
</div>
<div>
<canvas id="myChart4"></canvas>
</div>
<script>
$(document).ready(function() {
  $("#button1").click(function(){
    var dropd = $("#drop").val();
    console.log(dropd);
    $.ajax({ url: "data.php", method: "GET", data: { id : dropd }, success: function(data) { }, error: function(error) { reject(error); } });
      function grab() {
        return new Promise((resolve, reject) => {
        $.ajax({
            url: "data.php",
            method: "GET",
            success: function(data) {
            },
            error: function(error) {
                reject(error);
            }
        });
    });
}

    grab().then((data) => {
        console.log('Recieved our data', data);
        let Zeit = [];
        let Luft = [];

        try {
            data.forEach((item) => {
                Zeit.push(item.Zeit);
                Luft.push(item.Luftfeuchtigkeit);
            });

            let chartdata1 = {
                labels: [...Zeit],
                datasets: [{
                    label: 'Luftfeuchtigkeit',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: [...Luft]
                }]
            };

            let ctx = $("#myChart1");

            let barGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata1
            });

        } catch (error) {
            console.log('Error parsing JSON data', error);
        }

    }).catch((error) => {
        console.log(error);
    });
function grab() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: "data.php",
            method: "GET",
            success: function(data) {
                resolve(data);
            },
            error: function(error) {
                reject(error);
            }
        });
    });
}

    grab().then((data) => {
        console.log('Recieved our data', data);
        let Zeit = [];
        let Boden = [];

        try {
            data.forEach((item) => {
                Zeit.push(item.Zeit);
                Boden.push(item.Bodenfeuchtigkeit);
            });

            let chartdata2 = {
                labels: [...Zeit],
                datasets: [{
                    label: 'Bodenfeuchtigkeit',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: [...Boden]
                }]
            };

            let cty = $("#myChart2");

            let barGraph = new Chart(cty, {
                type: 'line',
                data: chartdata2
            });

        } catch (error) {
            console.log('Error parsing JSON data', error)
        }

    }).catch((error) => {
        console.log(error);
    });
    grab().then((data) => {
        console.log('Recieved our data', data);
        let Zeit = [];
        let Temp = [];

        try {
            data.forEach((item) => {
                Zeit.push(item.Zeit);
                Temp.push(item.Temperatur);
            });

            let chartdata3 = {
                labels: [...Zeit],
                datasets: [{
                    label: 'Temperatur',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: [...Temp]
                }]
            };

            let ctt = $("#myChart3");

            let barGraph = new Chart(ctt, {
                type: 'line',
                data: chartdata3
            });

        } catch (error) {
            console.log('Error parsing JSON data', error);
        }

    }).catch((error) => {
        console.log(error);
    });
function grab() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: "data.php",
            method: "GET",
            success: function(data) {
                resolve(data);
            },
            error: function(error) {
                reject(error);
            }
        });
    });
}

    grab().then((data) => {
        console.log('Recieved our data', data);
        let Zeit = [];
        let Licht = [];

        try {
            data.forEach((item) => {
                Zeit.push(item.Zeit);
                Licht.push(item.Lichtverhältnis);
            });

            let chartdata4 = {
                labels: [...Zeit],
                datasets: [{
                    label: 'Lichtverhältnis',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: [...Licht]
                }]
            };

            let cte = $("#myChart4");

            let barGraph = new Chart(cte, {
                type: 'line',
                data: chartdata4
            });

        } catch (error) {
            console.log('Error parsing JSON data', error)
        }

    }).catch((error) => {
        console.log(error);
    });
});
});
</script>

这是我的调试器告诉我的。

【问题讨论】：

标签： php jquery charts drop-down-menu get

【解决方案1】：

我认为您没有从 ajax 传递 id，这就是为什么您只从 php 的 else 部分获取 id = 1 的原因。尝试通过 ajax 发送数据。

$.ajax({ 网址：“data.php”，方法：“获取”，数据：{ id : dropd }，成功：函数（数据）{ }, 错误：函数（错误）{ 拒绝（错误）； } });

【讨论】：

$(document).ready(function() { $("#button1").click(function(){ var dropd = $("#drop").val(); console.log(dropd); $.ajax({ url: "data.php", method: "GET", data: { id : dropd }, success: function(data) { }, error: function(error) { reject(error); } }); 但它不起作用对不起布局我不知道如何正确编辑它我是stackowerflow的新手。
在调试器工具中检查你发送到 php 文件的内容。
我想我知道问题出在哪里，但我不知道如何解决它。在调试器中，他发送了值，但随后他发送了三遍，我将在 4 个图表所在的位置发布我的整个代码以及来自调试器的照片。

【解决方案2】：

好吧，我想我明白了，但我可能错了，似乎当你调用函数 $.getJSON 时你对结果什么都不做，因为你在对结果做一些事情之前用分号关闭函数然后你做另一个使用 AJAX 的调用没有发送 ID，并且在您的 PHP 中因为 $id 未设置，它进入 else 并且 $id 采用 1 的值。让我在cmets中解释一下

$(document).ready(function() {
  $("#button1").click(function(){
    var dropd = $("#drop").val();
    console.log(dropd);
    $.getJSON('data.php', {id: dropd});//You finish the statement but never did anything with the results.
      function grab() {
        return new Promise((resolve, reject) => {
        $.ajax({//Here you make another request but you never send the ID
            url: "data.php",
            method: "GET",
            success: function(data) {
            },
            error: function(error) {
                reject(error);
            }
        });
    });
}

因为可能是您拥有的第一个console.log()，所以确实打印了一些东西；您假设您确实将其发送到服务器，并且您确实在 $.getJSON 上发送了它，但从未对结果进行任何处理，然后您又向 $.ajax 提出了另一个请求，但在这种情况下您从未发送过 ID。

所以试试这个

$(function () { //This is a shorthand for $(document).ready(function(){}); recommended by JQuery itself
    $("#button1").click(function () {
        var dropd = $("#drop").val();
        console.log(dropd);
        $.getJSON('data.php', {id: dropd}, function (data) {
            grab(data);
        }).fail(function (jqxhr, textStatus, error) {
            //Do something in case of fail
            var err = textStatus + ", " + error;
            console.log( "Request Failed: " + err );
            //console.log('Error parsing JSON data', error);
            /*
             It'll enter here if the Data cannot be parsed or it any other network error occurs
             */
        });
    });
});

function grab(data) {
    console.log('Recieved our data', data);
    let Zeit = [];
    let Luft = [];

    data.forEach((item) => {
        Zeit.push(item.Zeit);
        Luft.push(item.Luftfeuchtigkeit);
    });

    let chartdata1 = {
        labels: [...Zeit],
        datasets: [{
                label: 'Luftfeuchtigkeit',
                backgroundColor: 'rgba(200, 200, 200, 0.75)',
                borderColor: 'rgba(200, 200, 200, 0.75)',
                hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                hoverBorderColor: 'rgba(200, 200, 200, 1)',
                data: [...Luft]
            }]
    };

    let ctx = $("#myChart1");

    let barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata1
    });
}

尝试一下或检查我首先告诉你的内容，作为建议，我总是在我的 JSON 响应中使用“标志”来了解 PHP 是否正确接收了所有数据，例如

这里的一切都是多余的

<?php
header('Content-Type: application/json');

$conn = mysqli_connect("localhost","root","","usera01");
$id = isset($_GET['dropd']) ? $_GET['dropd'] : false;
   if ($id) {
      //echo ($_GET['dropd']);
   } else {
     echo '{"success":false, "message":"No ID value was received."}';
     die();
   }

$sqlQuery = "SELECT idDatenNr, Luftfeuchtigkeit, Lichtverhältnis, Bodenfeuchtigkeit,Temperatur, Zeit, fi_idStation FROM daten WHERE fi_idStation = '$id'";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
 $data[] = $row;
}
$myJSON = ["succes": true,
"data"=>$data];
mysqli_close($conn);

echo json_encode($myJSON);

我的意思是这是额外的，但这就是您验证来自客户端的输入的方式，如果您需要在第一次加载或其他情况下默认发送$id=1，您应该使用 JavaScript 执行此操作并将其视为错误如果没有收到，则在 PHP 中。

如果对您有帮助，您只需修改 $.getJSON 函数

$.getJSON('data.php', {id: dropd}, function(response){//I changed the name
        if(response.success){
            grab(response.data);
        }else{
            console.log(response.message);
        }
    }).fail(function(){
        //Do something in case of fail
        console.log('Error parsing JSON data', error);
        /*
         It'll enter here if the Data cannot be parsed or it any other network error occurs
        */
    });

【讨论】：

您好，首先感谢您的回复，我将整个代码粘贴到那里，您可以看到我搞砸了，因为每次点击提交时，我总共有 4 个图表，第一次发送该值但还加载（我认为）4次没有数据的其他内容我还发布了来自调试器的图像，您可以在其中看到它。但是感谢您的 $getJASON，我现在正在更改它
你能告诉我你从数据库返回什么，比如 JSON 对象吗？ JavaScriot 代码有点令人困惑，您多次重复 grab() 函数，也许我们可以优化，但我需要知道 JSON 对象是什么样的