Python 使用jquery/ajax显示来自服务器的JSON数据

我有一个简单的问题。但我完全了解AJAX，一直在四处搜索，没有找到任何适用的

单击按钮时，我正在从Flask应用程序/Web服务器中的路由获取数据。我试图返回页面上相应id元素中的数据，但即使我指定了它们的id，数据也只发送到第一个id。此外，数据以随机顺序发送。在处理从flask检索的JSON数据方面，我显然走错了方向

此外，我不理解functionresult、functiondatanot Showed和function not Showed在ajax/jquery语言中的用途。如果有人可以私奔那就太好了，我给它谷歌搜索，也找不到任何有用的东西。 有人有什么建议吗？多谢各位

JQUERY/AJAX

$(document).ready(function() {

    $('#data_refresh').click(function() {
        $.getJSON($SCRIPT_ROOT + '/data_refresh', function(result) {
                $.each(result, function(i, field){
                    $('#ph').text(data.ph);
                    $('#distance').text(data.distance);
                    $('#air_temp').text(data.air_temp);
                    $('#humidity').text(data.humidity);
                    $('#heat_index').text(data.heat_index);
            });
        });
    });
});

HTML

我没有看到您在哪里声明了数据变量。您可能希望使用结果变量

老实说，最好的办法可能是打开浏览器的开发工具，进入网络选项卡，寻找AJAX调用。你应该能够看到你收到的原始形式。如果它是格式正确的JSON，您可能还会有一个预览视图，以帮助以树状视图查看数据

此外，我不明白functionresult的目的， 函数数据未显示，函数未显示在 ajax/jquery语言

我们在这里所做的是使用getJSON函数从特定的URL获取第一个参数，然后将一个匿名函数作为getJSON函数的回调第二个参数。在该函数的作用域内，我们传入一个名为result的变量

对不起，我不知道FLASK/Python，但我假设您得到的响应实际上是

result = {
    ph         : 'your PH value',
    distance   : 'your distance value',
    air_temp   : 'your air temp value',
    humidity   : 'your humidity value',
    heat_index : 'your heat index value',
};

要获得结果的每个键的值，您将按照所做的操作进行。想要湿度吗？结果是

这样做的方式是，将结果对象/数组作为一个结果数组处理，每个结果都有ph值、距离、空气温度、湿度和热量索引值

所以，而不是

{
    ph         : 'your PH value',
    distance   : 'your distance value',
    air_temp   : 'your air temp value',
    humidity   : 'your humidity value',
    heat_index : 'your heat index value',
}

你更像是在对待它

result = [
    {
        ph         : '1st element's PH value',
        distance   : '1st element's distance value',
        air_temp   : '1st element's air temp value',
        humidity   : '1st element's humidity value',
        heat_index : '1st element's heat index value',
    },
    {
        ph         : '2nd element's PH value',
        distance   : '2nd element's distance value',
        air_temp   : '2nd element's air temp value',
        humidity   : '2nd element's humidity value',
        heat_index : '2nd element's heat index value',
    },
    {
        ph         : '3rd element's PH value',
        distance   : '3rd element's distance value',
        air_temp   : '3rd element's air temp value',
        humidity   : '3rd element's humidity value',
        heat_index : '3rd element's heat index value',
    }, 
    .....
];

如果有帮助，$.eachresult，functioni，field{function是一个jQuery迭代器，它将获取return 1st参数并将其作为数组循环，返回该回调范围内的indexi和valuefield。

---

多年来它的好处是，它还可以迭代对象非数字数组键，如果你愿意的话，i将成为键，字段将成为值。我们现在有for…in和for…of in vanilla JS

感谢你的全面回复，我的代码中出现了一些奇怪的情况。我用结果更改了数据以尝试引用从Flask输入json格式的变量。但是，无论我做了什么更改，当我单击按钮时，我都会得到相同的响应和结果。即使我完全删除了ajax代码，我仍然会以某种方式收到传感器值。非常令人困惑，因此，我将其用于您的编辑…感谢您向我指出这一点。然而，我甚至可以从中得到什么更令人费解的是，我意识到在对我的JS代码进行了所有更改之后，没有一个代码被更新到Web服务器。我不知道为什么会这样。每次我需要更新我的JS时，我都必须清除我的浏览历史。这完全正常。这是一个功能，而不是一个bug。现在简单的破解缓存技术：只要你为你的JS文件添加一个新版本，添加一个查询变量，如bla.JS？v=2，并在你的HTML中不断增加它，其中包括它。哈！经典的新手灾难。感谢我在网上看到其他人给出的建议，谢谢。那么你是说我应该增量更改我的javascript相对于我的HTML的名称。比如当我在html中引用javascript时，每次更改JS时，我都应该手动增加文件名末尾的？v=2+1？

 $.getJSON($SCRIPT_ROOT + '/data_refresh', function( result ) {

result = {
    ph         : 'your PH value',
    distance   : 'your distance value',
    air_temp   : 'your air temp value',
    humidity   : 'your humidity value',
    heat_index : 'your heat index value',
};

{
    ph         : 'your PH value',
    distance   : 'your distance value',
    air_temp   : 'your air temp value',
    humidity   : 'your humidity value',
    heat_index : 'your heat index value',
}

result = [
    {
        ph         : '1st element's PH value',
        distance   : '1st element's distance value',
        air_temp   : '1st element's air temp value',
        humidity   : '1st element's humidity value',
        heat_index : '1st element's heat index value',
    },
    {
        ph         : '2nd element's PH value',
        distance   : '2nd element's distance value',
        air_temp   : '2nd element's air temp value',
        humidity   : '2nd element's humidity value',
        heat_index : '2nd element's heat index value',
    },
    {
        ph         : '3rd element's PH value',
        distance   : '3rd element's distance value',
        air_temp   : '3rd element's air temp value',
        humidity   : '3rd element's humidity value',
        heat_index : '3rd element's heat index value',
    }, 
    .....
];