$ .get函数在铬浏览器树莓派pi3上不起作用，但在chrome桌面上起作用
[英]$.get function not working on chromium-browser raspberry pi3 but working on chrome desktop
问题描述
我有一个应该与flask服务器通信并获取gpio按钮的最新状态的函数，以便可以在所有客户端之间同步按钮的color属性。 在桌面chrome上，该功能可以完美运行，但在树莓派chrome浏览器上，客户端甚至不会调用该功能。
html代码：
<div id="centerArea">
<div id="temperatureBox">
<div id="temperature">
<div id="temperatureValue"></div>° <sup>C</sup>
</div>
<div id="humidity">
Humidity: <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地址是在铬浏览器上的树莓派3上打开的客户端，以228结尾的是在Windows笔记本电脑上以chrome打开的客户端。 客户端不会在树莓派上调用B1status和B2status函数，即使对湿度和温度的函数调用没有问题。
这就是为什么我根本无法弄清楚为什么只有这两个功能无法正常工作而其他两个却都正常工作的原因。
在任何一个客户端中都没有控制台错误，并且在树莓派的客户端上单击该按钮时，已在Windows系统上的客户端上进行了适当的更新，因此，据我所知，代码在起作用，只是在Chrome上没有浏览器
谢谢
更新
显然我只需要分别设置功能间隔。 如先前链接的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)
我什至设法将按钮状态的值存储在变量中，并且如果在下一个时间间隔内状态没有更改，则该函数基本上什么也不做，这节省了服务器的一点处理要求。
1 个解决方案
解决方案1
0 2016-07-18 15:31:04
只需尝试fetch（）首先安装npm i --save es6-promise isomorphic-fetch
接着：
require('es6-promise').polyfill();
require('isomorphic-fetch');
Raspberry Pi-使用JQuery的Flask Server不能离线工作（在线可以工作）
[英]Raspberry Pi - Flask Server using JQuery not working Offline (Online it works)
$ .get功能未在Chrome中运行，但在IE和FireFox中运行
[英]$.get function not running in Chrome but working in IE and FireFox
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.