Question

几个星期了，我正试图在运行Raspbian的覆盆子pi上设置我的局域网上运行的新主页。

我想要做的是将某些RC开关的状态保存在数据库中并显示我网站上的实际状态。我已经设置了我的数据库，我现在想要的是，图标通过数据库中的RC开关的状态得到更新。例如，我有一个图标“lightbulb_off”和“lightbulb_on”。如果数据库说灯1关闭，则“lightbulb_off”将出现。

我处于一切可行的地步，但每次点击图标时都要重新加载页面，切换RC Switch并更新数据库，以查看新图标。我想在不重新加载页面的情况下更改图标。我尝试了很多使用AJAX来组合jscript和PHP，但是我没有得到它。

这是我的代码：

<img id="LampTV" src=<?php Lampe($qLTV, $queryLTV); ?> onclick="Lampe('http://192.168.1.66/index.html?schalte&9'), updateStateLampeTV()">

所以src = Lampe（）读取数据库中的实际状态。单击RC Switch后，数据库将更新。

现在，如何在不重新加载页面的情况下更改图标？我想它不适用于PHP，但我不知道如何使用AJAX实现它。

谢谢你的帮助!!

更新

现在我创建了这个函数：

function icon(){$(document).ready(function(){$.ajax({url: 'PHP/icon_state.php',type:post',data: {'Lampe($qLTV, $queryLTV)'},success: function(data,status)

它应该在我的php文件中运行一个函数，它回显正确的图标文件的路径。不这样做:(

Answer 1

您需要使用Ajax。正如我在评论中看到的那样，你试图做点什么。

所以，你有一个你的形象的ID，什么是伟大的。我们可以将click函数绑定到它。将数据部分中所需的数据作为对象（或查询字符串或数组）传递，并在ajax的success函数中，更新原始图像对象的源。

    $('#LampTV').click(function() {
        var qLTV = 'Some data what you need to pass';
        var queryLTV = 'Some other data, what you want'
        var LampTVObj = $(this);
        $.ajax({
            type: "POST",
            url: 'PHP/icon_state.php',
            data: {
                qLTV: qLTV,
                queryLTV: queryLTV
            }, success: function(data) {
                //In your php you need to echo the URL of the status image
                //like this 
                //echo 'http://example.com/images/online.png';
                $(LampTVObj).attr('src', data);
            }
        });
    });

Answer 2

出于测试目的，我创建了一个新文件“test.php”。这是该文件的代码：

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Home-Page</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>

<body>
<!--Script Bereich-->
<script>
//Funktion für Lampen
function change_state(){
$('#LampTV').click(function() {
        var LampTVObj = $(this);
        $.ajax({
            type: "POST",
            url: 'PHP/updateStateLampeTV.php',
            success: function(data) {
                //In your php you need to echo the URL of the status image
                //like this 
                //echo 'http://example.com/images/online.png';
                $(LampTVObj).attr('src', data);
                return false;
            }
        });
    });
}
</script>
<!--Script Bereich ENDE-->
<?php
include ("PHP/icon_state.php");
error_reporting(-1);
ini_set('display_errors', TRUE); 



?>
<img id="LampTV" src="<?php Lampe($qLTV, $queryLTV); ?>" onclick='change_state()'>
</body>
</html>

这里我们有'updateStateLampeTV.php'文件：

<?php
error_reporting(-1);
ini_set('display_errors', TRUE);

    // Connect to MySQL
    include("dbconnect.php");
    //Funktion zur Abfrage des aktuellem Zustandes in der Datenbank 

    // Datenbank auswählen
    mysql_select_db("homecontrol") or die(mysql_error());

// SQL-Query
    $queryLTV = "SELECT Zustand FROM `funksteckdosen` WHERE Standort= 'Lampe TV'";
// Query ausführen (die Datensatzgruppe $rs enthält das Ergebnis)
    $qLTV = mysql_query($queryLTV);
//Status Lampe
    function statusLampe(){
    global $queryLTV;
    global $qLTV;

        while ($datensatz = mysql_fetch_assoc($qLTV)){
    $z = $datensatz['Zustand'];
    }
    if ($z == "An"){
        $SQL = "UPDATE funksteckdosen SET Zustand = 'Aus' WHERE `funksteckdosen`.`Standort` = 'Lampe TV'";    
        // Execute SQL statement
        mysql_query($SQL);
        echo "../gfx/ligthbulb_on.png";
    }
        elseif($z == "Aus"){
        $SQL = "UPDATE funksteckdosen SET Zustand = 'An' WHERE `funksteckdosen`.`Standort` = 'Lampe TV'";    
        // Execute SQL statement
        mysql_query($SQL);
        echo "../gfx/ligthbulb_off.png";
        }
    }
statusLampe();
?>

不要看我的评论，他们是德国人......

好吧，当我第一次点击图标时没有任何反应，在第二次点击时Firebug告诉我2次“POST http://myIP/PHP/updateStateLampeTV.php”（我必须提到“updateStateLampeTV.php = icon_state.php带有不同的回声）”在下次点击时发送3次，依此类推。你看到错误在哪里了吗？

图标更改取决于数据库设置

2 个答案: