0

我在$(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);

加载页面时，信息是正确的，数据库中的内容就是屏幕上颜色所反映的内容。

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

如何解决此问题，以使屏幕上反映的信息准确无误？

4

1 回答 1

1

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

<html>
….
</html>

或者

‘Yes’

或者

<?php echo ‘something’; ?>

那么如何获取一行 Date 或大量数据呢？因为你得到的唯一的东西是一个文本或者可能是一个长文本。
为此，您可以使用类似于嵌套数组的 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" 
},
…

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

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

PHP 中的 Json_encode() 获取一个数组并返回它的 json 字符串。我们回应它。现在我们可以使用 jQuery 来获取将从服务器检索的数据。
本节来自
Learning jQuery 1.3
Better Interaction Design and Web Development with Simple
JavaScript Techniques
Jonathan Chaffer
Karl Swedberg

全局 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 代码中很常见。命名函数同样可以作为回调提供。
在这个函数内部，我们可以根据需要使用数据变量来遍历数据结构。我们需要遍历顶层数组，为每个项目构建 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 附加到 .

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

于 2013-04-07T18:24:49.973 回答