繁体   English   中英

MySQL查询未在setInterval上返回最新结果

[英]MySQL Query not returning newest results on setInterval

我在$(document).ready(function(){}中的 setInterval遇到问题

我正在做的是设置时间间隔,即调用一个PHP脚本,该脚本运行一些MySQL查询以检查4个开关的条件,然后使用数据库中的值更新屏幕,如下所示:

$(document).ready(function(){

setInterval(function(){

<?php require('fetchSwitchStatuses.php'); ?>

$("#switch1").css('background', 'rgb(<?php echo $switchColor1 ?>)');
$("#switch1").html('<?php echo $switchState1 ?>');
$("#switch2").css('background', 'rgb(<?php echo $switchColor2 ?>)');
$("#switch2").html('<?php echo $switchState2 ?>');
$("#switch3").css('background', 'rgb(<?php echo $switchColor3 ?>)');
$("#switch3").html('<?php echo $switchState3 ?>');
$("#switch4").css('background', 'rgb(<?php echo $switchColor4 ?>)');
$("#switch4").html('<?php echo $switchState4 ?>');
  },1000);

});

这是fetchSwitchStatuses.php的代码:

$connect = mysqli_connect("localhost", "root", "root");
mysqli_select_db($connect, "db_name");


$fetch1 = mysqli_query($connect,
"SELECT SwitchStatus FROM Switches WHERE PinNumber = '3'"
);
$fetch2 = mysqli_query($connect,
"SELECT SwitchStatus FROM Switches WHERE PinNumber = '5'"
);
$fetch3 = mysqli_query($connect,
"SELECT SwitchStatus FROM Switches WHERE PinNumber = '6'"
);
$fetch4 = mysqli_query($connect,
"SELECT SwitchStatus FROM Switches WHERE PinNumber = '9'"
);


$i = 1;

while($row = mysqli_fetch_array(${'fetch'.$i}))
{

    if($row['SwitchStatus'] == 0)
    {
        ${'switchColor'.$i} = "255, 0, 0";
        ${'switchState'.$i} = "OFF";

    }
    else if ($row['SwitchStatus'] == 1){
        ${'switchColor'.$i} = "0, 255, 0";
        ${'switchState'.$i} = "ON";
    }
    else {
        ${'switchColor'.$i} = "100, 100, 100";
        ${'switchState'.$i} = "ERROR";
    }
$i++;
}


mysqli_close($connect);

加载页面后,信息是正确的,数据库中的内容将由屏幕上的颜色反映出来。

当我单击对象以更改值时,将进行所有必要的更改并更新数据库。 但是,重复间隔时会出现问题。 加载页面时,这些值将切换回原始值。 因此,尽管数据库中的信息已正确更改,但由于某些原因,按钮的颜色始终会重置为查询读取的第一个值。

如何解决此问题,使屏幕上显示的信息准确无误?

使用AJAX技术,您可以:通过请求页面(.txt .js .html甚至php)来发送请求并从服务器获取结果。
因此,使用AJAX,您可以获得页面结果,将某些内容保存到数据库,从数据库中获取内容,可以使用会话,也可以使用php文件执行任何操作。 当您向查看页面发送AJAX请求时(即/userData.php?userId=5),将执行/userData.php?userId=5页面,并返回其输出。(HTML或只是单词'yes ”,“否”或“您无法访问此用户的信息”)。
您可以使用POST或GET将数据发送到文件。 但是问题是如何从页面获取数据。 因为结果AJAX将为您提供所请求的页面回显到这样的页面的内容

<html>
….
</html>

要么

‘Yes’ 

要么

<?php echo ‘something’; ?>

那么,如何获取日期行或大量数据呢? 因为您得到的唯一是一条文本或长文本。
为此,您可以使用类似于嵌套数组的JSON。

[ 
{ 
"term": "BACCHUS", 
"part": "n.", 
"definition": "A convenient deity invented by the...", 
"quote": [ 
"Is public worship, then, a sin,", 
"That for devotions paid to Bacchus", 
"The lictors dare to run us in,", 
"And resolutely thump and whack us?" 
], 
"author": "Jorace" 
},
…

这也是一个字符串。 但是您可以使用$ .getJSON在jQuery中获取数据,并且可以像这样在服务器端生成JSON数据。

<?php
$arr=array(
‘data’=>’ffff’,
‘anotherData’=>array(‘rrrrr’,’sssss’);
);
Echo json_encode($arr);
?>

PHP中的Json_encode()获取数组并返回其json字符串。 我们对此表示赞同。 现在我们可以使用jQuery获取将从服务器检索的数据。
本节来自
学习jQuery 1.3
简单易用的交互设计和Web开发
JavaScript技术
乔纳森·查弗
卡尔·斯威德伯格

全局jQuery函数
至此,我们已经使用的所有jQuery方法都已附加到使用$()工厂函数构建的jQuery对象上。 选择器允许我们指定一组要使用的DOM节点,并且这些方法已经以某种方式对其进行了操作。 但是,此$ .getJSON()函数是不同的。 没有逻辑DOM元素可以应用; 结果对象必须提供给脚本,而不是注入到页面中。 因此,将getJSON()定义为全局jQuery对象(由jQuery库定义一次的称为jQuery或$的单个对象)的方法,而不是单个jQuery对象实例(我们使用$( )功能)。
如果JavaScript具有类似于其他面向对象语言的类,则将$ .getJSON()称为类方法。 为了我们的目的,我们将这种方法称为全局函数。 实际上,它们是使用jQuery名称空间的函数,以免与其他函数名称冲突。
要使用此功能,我们像以前一样将文件名传递给它:

$(document).ready(function() { 
$('#letter-b a').click(function() { 
$.getJSON('b.json'); 
return false; 
});
});

当我们单击链接时,此代码没有明显的作用。 函数调用将加载文件,但是我们没有告诉JavaScript如何处理结果数据。 为此,我们需要使用回调函数。
$ .getJSON()函数带有第二个参数,该参数是加载完成后要调用的函数。 如前所述,AJAX调用是异步的,并且回调提供了一种等待数据传输而不是立即执行代码的方法。 回调函数还接​​受一个参数,该参数填充有结果数据。 因此,我们可以这样写:

$(document).ready(function() { 
$('#letter-b a').click(function() { 
$.getJSON('b.json', function(data) { 
}); 
return false; 
});
});

在这里,我们使用匿名函数作为回调,为简便起见,在我们的jQuery代码中很常见。 同样可以提供一个命名函数作为回调。
在此函数内,我们可以根据需要使用data变量遍历数据结构。 我们需要遍历顶级数组,为每个项目构建HTML。 我们可以使用标准的for循环来做到这一点,但相反,我们将介绍jQuery的另一个有用的全局函数$ .each()。 我们在第5章中看到了它的对应物.each()方法。该函数不对jQuery对象进行操作,而将数组或映射作为第一个参数,并将回调函数作为第二个参数。 每次循环时,数组或映射中的当前迭代索引和当前项都作为两个参数传递给回调函数。

$(document).ready(function() { 
$('#letter-b a').click(function() { 
$.getJSON('b.json', function(data) { 
$('#dictionary').empty(); 
$.each(data, function(entryIndex, entry) { 
var html = '<div class="entry">'; 
html += '<h3 class="term">' + entry['term'] + '</h3>'; 
html += '<div class="part">' + entry['part'] + '</div>'; 
html += '<div class="definition">'; 
html += entry['definition']; 
html += '</div>'; 
html += '</div>'; 
$('#dictionary').append(html); 
}); 
}); 
return false; 
});
});

在循环之前,我们将其清空,以便可以使用新构建的HTML填充它。 然后,我们使用$ .each()依次检查每个项目,并使用入口映射的内容构建HTML结构。 最后,通过将HTML附加到,将其转变为DOM树。

这种方法假定数据对于HTML消费是安全的。 例如,它不应包含任何杂散<字符。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM