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

Question

我认为这是一个简单的问题。但是我完全了解 AJAX，并且一直在四处寻找，但没有找到任何我能找到适用的东西。

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

此外，我不明白 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

<button id='data_refresh' type="button">Refresh Data</button>
  <div class="sensor">
    <h3> PH:<span id='ph'></span></h3>
  </div>

  <div class="sensor">
    <h3> Water Temperature: <span id='water_temp'></span></h3>
  </div>

  <div class="sensor">
    <h3> Water Level: <span id='distance'></span></h3>
  </div>

  <div class="sensor">
    <h3> Air Temperature: <span id='air_temp'></span></h3>
  </div>

  <div class="sensor">
    <h3> Humidity: <span id="humidity"></span></h3>
  </div>

  <div class="sensor">
    <h3> Heat Index: <span id="heat_index"></span> </h3>
  </div>

烧瓶/蟒蛇

@app.route("/data_refresh")
def data_refresh():
    ser = serial.Serial('/dev/ttyUSB0', 9600, 8, 'N', 1)
    data = ser.readline().rsplit()
    # temp = temp_sensor1.read_temp()
    ph = float(data[0])
    distance = int(data[1])
    humidity = float(data[2])
    air_temp = float(data[3])
    heat_index = float(data[4])
    now = datetime.now().strftime("%A %-m/%d/%y %-I:%-M:%-S %p")
    ser.close()
    return jsonify(ph=ph, distance=distance, humidity=humidity, air_temp=air_temp, heat_index=heat_index, now=now)

Answer 1

$.each(result, function(i, field){
      $('#ph').text(data.ph);

我没有看到您在哪里声明了 data 变量。您可能想要使用 result 变量。

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

此外，我不明白函数的目的（结果）， 函数（数据）（（未显示）），函数（）（（未显示））在 ajax/jquery 语言。

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

我们在这里所做的是使用 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',
};

要获取结果的每个键的值，您可以照做。想要湿度？ result.humidity 是。

按照您的操作方式，您将获取 result 对象/数组并将其视为结果数组，每个结果都具有 ph、距离、air_temp、湿度和 heat_index 值。

所以，而不是

{
    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',
    }, 
    .....
];

如果有帮助，$.each(result, function(i, field){ 函数是一个 jQuery 迭代器，它将采用 return（第一个参数）并将其作为数组循环，返回索引（i）和值（field ) 在该回调的范围内。 多年来它的好处是它还可以迭代一个对象（非数字数组键，如果你愿意的话），i 将成为键，field 将成为值。 （我们现在在 vanilla JS 中有 for...in 和 for...of）