Question

美好的一天。我刚刚了解了javascript，在这里我正在编写代码，以在每次使用javascript自动重新加载时显示mysql上的最新数据。根据我编写的代码，显示每个div的湿度和温度数据。但是我想为每个div（容器）显示单独的数据。例如，div：湿度将仅显示湿度数据，依此类推。你能帮助我吗。非常感谢您的帮助。

这是index.php中的代码：

<html>
<head>
<script src="/js/jquery.js"></script>
<script>
var refreshId = setInterval(function()
{
$('#humidity').load('tampil.php');
    $('#temperature').load('tampil.php');
}, 200);
</script>
</head>
<body>
<h4>Humidity: </h4> 
<div id="humidity"></div>
<h4>Temperature: </h4>      
<div id="temperature"></div>    
</body>
</html>

这是tampil.php的代码：

<?php
include("connection.php");
$result2=mysqli_query($koneksi,"SELECT * FROM `data` ORDER BY `waktu` DESC LIMIT 1");
if($result2!==FALSE){
    while($lastrow = mysqli_fetch_array($result2)) {
        $last_temp=$lastrow["temperature"];
        $last_rh=$lastrow["humidity"];

        echo "$last_rh";
        echo "$last_temp";
    }
    }
?>

感谢您的帮助。

Answer 1

理想情况下，您会将php数据打包为一个json对象，并进行一次调用，然后解析数据和前端，但这是一种以启动方式使之工作的方法。

您可以将数据包装在带有php文件中ID的div中，然后告诉jQuery load函数仅从页面上的某个div中获取数据。这是修改文件的方式。

PHP

echo "<div id='humidity'>$last_rh</div>";
echo "<div id='temperature'>$last_temp</div>";

JS

$('#humidity').load('tampil.php #humidity');
$('#temperature').load('tampil.php #temperature');

Answer 2

您应该进行一个Ajax调用，将两个值都返回为JSON并简单地更新div中的内容。

我在整个代码中添加了注释，解释了做什么以及为什么这么做。

注意：该代码未经测试，因此可能会有一些错误，但这是如何执行的要旨。

另一件事，这将每秒更新div 5次。好多！

Javascript：

<script>
    // Make the variable global so we can access it from 
    // outisde jQuery's on load function
    var refresId;

    // wrap it in $(function(){}) to make it wait until the page
    // has been fully loaded before executing the code
    $(function () {
        refreshId = setInterval(function() {
            // Make one call to return both values
            $.get('tampil.php').done(function (result) {
                // Just update the contents of the divs
                $('#humidity').html(result.humidity);
                $('#temperature').html(result.temperature);
            });
        }, 200);
    });
</script>

PHP：

<?php
include("connection.php");
$result2 = mysqli_query($koneksi,"SELECT * FROM `data` ORDER BY `waktu` DESC LIMIT 1");

// Since we only want one row, no need to loop it
$row = mysqli_fetch_array($result2);

// Create an array that we can convert as json.
// The ?? is short hand for "isset($x) ? $x : null" which is good to 
// have so the code won't break if the query won't return what we expect.
$response = [
    'temperature' => $row['temperature'] ?? null,
    'humidity'    => $row['humidity'] ?? null,
];

// Let the response know we're returning json
header('Content-type: application/json');

// Encode the array as json and echo the result
echo json_encode($response);

// We're done so let's stop the script from keep executing.
exit;

Javascript加载具有不同功能的特殊功能的PHP文件

2 个答案: