【问题标题】:$.get function not working on chromium-browser raspberry pi3 but working on chrome desktop$.get 函数不适用于 chromium-browser raspberry pi3,但适用于 chrome 桌面
【发布时间】:2016-07-18 15:27:17
【问题描述】:

我有一个函数应该与烧瓶服务器通信并获取 gpio 按钮的最新状态,以便按钮的颜色属性可以在所有客户端之间同步。在桌面 chrome 上,该函数运行良好,但在 raspberry pi chromium-browser 上,该函数甚至没有被客户端调用。

html代码:

<div id="centerArea">
                    <div id="temperatureBox">
                        <div id="temperature">
                            <div id="temperatureValue"></div>&deg <sup>C</sup>
                        </div>
                        <div id="humidity">
                            Humidity: &nbsp;<div id="humidityValue"></div>%
                        </div>
                    </div>
                </div>

<div id="buttonsBar">
                    <div id="buttons">
                        <button type="submit" value="Button1" class="sync" id="B1" name="B1" onclick="b1(); return false;">Button1</button>
                    </div>
                    <div id="buttons">
                        <button type="submit" value="Button2" class="sync" id="B2" name="B2" onclick="b2(); return false;">Button2</button>
                    </div>
                    <div id="buttons">
                        <button type="submit" value="Button3" class="sync" id="B3" name="B3" onclick="b3(); return false;">Button3</button>
                    </div>
                    <div id="buttons">
                        <button type="submit" value="Button4" class="sync" id="B4" name="B4" onclick="b4(); return false;">Button4</button>
                    </div>
                </div>

烧瓶代码:

@app.route('/dhtTemp', methods=['GET','POST'])
def readTemperature():
    #sleep(3)
    dht22.trigger()
    temperature = str('%.2f' % (dht22.temperature()))
    return (temperature)

@app.route('/dhtHum', methods=['GET','POST'])
def readHumidity():
    #sleep(3)
    dht22.trigger()
    humidity = str('%.2f' % (dht22.humidity()))
    return (humidity)

@app.route('/B1status', methods=['GET','POST'])
def readBStatus():
    b1status = str(gpio.input(relayPins[0]))
    #b3status = str(gpio.input(relayPins[2]))
    #b4status = str(gpio.input(relayPins[3]))
    return (b1status)

@app.route('/B2status', methods=['GET','POST'])
def readB2Status():
    b2status = str(gpio.input(relayPins[1]))
    return (b2status)

javascript代码:

function get_temps(){
$.getJSON("dhtTemp", 
    function(temperature){
        $('#temperatureValue').text(temperature)

    }
);
$.getJSON("dhtHum", 
    function(data){
        $('#humidityValue').text(" " + data)
    }
);
}

function get_Bstatus(){
            function get_B1status(){
                $.getJSON("B1status",
                    function(b1status){
                        if (b1status == "1"){
                            document.getElementById("B1").style.borderColor = "red";
                        }
                        else{
                            document.getElementById("B1").style.borderColor = "green";
                        }
                    }
                );
            }
            function get_B2status(){
                $.getJSON("B2status",
                    function(b2status){
                        if (b2status == "1"){
                            document.getElementById("B2").style.borderColor = "red";
                        }
                        else{
                            document.getElementById("B2").style.borderColor = "green";
                        }
                    }
                );
            }
        }
        setInterval('get_Bstatus()', 1000)

奇怪的是,检索温度和湿度的代码运行正常,即使它也使用相同的 $.get 函数。但是服务器甚至没有从客户端收到任何加载函数 get_Bstatus 的请求

服务器-客户端交互日志:

192.168.1.73 - - [18/Jul/2016 15:16:49] "GET /dhtTemp HTTP/1.1" 200 -
192.168.1.73 - - [18/Jul/2016 15:16:49] "GET /dhtHum HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:49] "GET /B1status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:49] "GET /B2status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:50] "GET /B1status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:50] "GET /B2status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:51] "GET /dhtTemp HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:51] "GET /B1status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:51] "GET /dhtHum HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:51] "GET /B2status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:52] "GET /B1status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:52] "GET /B2status HTTP/1.1" 200 -
192.168.1.73 - - [18/Jul/2016 15:16:53] "GET /dhtTemp HTTP/1.1" 200 -
192.168.1.73 - - [18/Jul/2016 15:16:53] "GET /dhtHum HTTP/1.1" 200 -

以 73 结尾的 IP 地址是在 chromium-browser 上的树莓派 3 本身上打开的客户端,以 228 结尾的 IP 地址是在 Windows 笔记本电脑上以 chrome 打开的客户端。客户端从不会在树莓派上调用函数 B1status 和 B2status,即使对湿度和温度的函数调用没有任何问题。

这正是为什么我根本无法弄清楚为什么只有这两个功能不起作用而其他两个功能正常。

在任何一个客户端中都没有控制台错误,当在树莓派的客户端上单击按钮时,它会在 Windows 系统上的客户端上适当更新,因此据我所知,代码正在运行,只是不在铬浏览器上。

谢谢

更新

显然我只需要分别设置函数的间隔。从之前链接的 javascript 代码中可以看出,父函数 get_Bstatus 正在调用函数 get_b1status 和 get_b2status。

当我分离函数并单独调用它们时,代码开始在所有客户端上运行。所以更新代码看起来像这样:

counter1 = "";
counter2 = "";
counter3 = "";
counter4 = "";
function get_B1status(){
    $.getJSON("B1status",
        function(b1status){
            if (counter1 != b1status){
                if (b1status == "1"){
                    document.getElementById("B1").style.borderColor = "red";
                    counter1 = b1status;
                }
                else{
                    document.getElementById("B1").style.borderColor = "green";
                    counter1 = b1status;
                }
            }
        }
    );
}
function get_B2status(){
    $.getJSON("B2status",
        function(b2status){
            if (counter2 != b2status){
                if (b2status == "1"){
                    document.getElementById("B2").style.borderColor = "red";
                    counter2 = b2status;
                }
                else{
                    document.getElementById("B2").style.borderColor = "green";
                    counter2 = b2status;
                }
            }
        }
    );
}
function get_B3status(){
    $.getJSON("B3status",
        function(b3status){
            if (counter3 != b3status){
                if (b3status == "1"){
                    document.getElementById("B3").style.borderColor = "red";
                    counter3 = b3status;
                }
                else{
                    document.getElementById("B3").style.borderColor = "green";
                    counter3 = b3status;
                }
            }
        }
    );
}
function get_B4status(){
    $.getJSON("B4status",
        function(b4status){
            if (counter4 != b4status){
                if (b4status == "1"){
                    document.getElementById("B4").style.borderColor = "red";
                    counter4 = b4status;
                }
                else{
                    document.getElementById("B4").style.borderColor = "green";
                    counter4= b4status;
                }
            }
        }
    );
}
setInterval('get_B1status()', 1000)
setInterval('get_B2status()', 1000)
setInterval('get_B3status()', 1000)
setInterval('get_B4status()', 1000)

我什至设法将按钮状态的值存储在一个变量中,如果在下一个时间间隔状态没有改变,那么该函数基本上什么都不做,节省了服务器的一点处理需求.

【问题讨论】:

  • 您是否尝试直接在 Web 浏览器控制台(F12)上调用您的函数:get_Bstatus();
  • 如果你把那行写成setInterval('get_Bstatus()', 1000)而不是setInterval(get_Bstatus(), 1000)
  • @Hackerman 我实际上尝试了你的建议,但我得到的结果是未定义的函数或其他东西,所以我意识到也许这个函数甚至没有被调用所以我回去改变了它的方式正在被调用,如编辑中所示。不过谢谢。同样在没有被限制器封装的情况下调用该函数实际上给我带来了问题,我之前曾尝试过一次温度和湿度函数,它只是给出了一个错误,但不记得它是什么,抱歉。

标签: jquery python flask chromium raspberry-pi3


【解决方案1】:

只需尝试 fetch() 先安装 polyfills npm i --save es6-promise isomorphic-fetch

然后:

require('es6-promise').polyfill();
require('isomorphic-fetch');

【讨论】:

    猜你喜欢
    • 2015-09-02
    • 2015-10-01
    • 2020-03-06
    • 1970-01-01
    • 2017-11-22
    • 2013-11-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多