AJAX不断刷新div内容

时间:2016-08-30 23:59:08

标签: javascript php jquery html ajax

我的脚本有问题。我想检查一下我的网站上是否有新房间,我使用AJAX和setInterval来做,但我也希望如果房间没有变化,HTML保持不变(没有刷新),因为那里是一个JavaScript函数,当你将鼠标悬停在div上时,"加入"选项出现。我认为仅仅将数据与发送时的响应进行比较是有效的,但事实并非如此。大多数代码:

的index.html:

<div id="pokojeDuze" class="col-12 row">
    <center>
        <div id="tworzeniePokoju">
            Create Room
        </div>
    </center>

    <div id="pokojeMale" class="col-12">
        <center>
            <img src='img/load.gif' width='30px' height='30px' /><br />
            Loading rooms...
        </center>
    </div>
</div>

<script type="text/javascript">
function dolaczanie(numer) {
    $.ajax({
        type: 'POST',
        url: 'php/dolaczanie.php',
        data: {
            'num': numer,
        },
        cache: true,
        beforeSend: function() {
            $('#gra').html("Dołączanie...");
        },
        success: function(result) {
            $('#gra').html(result);
            czy_w_pokoju();
        }
    });
}

function wyswietlanie_pokoi() {  
    $.ajax({
        type: 'POST',
        url: 'php/pokoje.php',
        data: {
            'dane': $("#pokojeMale").html()
        },
        cache: true,
        success: function(d) {
            if (d != $("#pokojeMale").html()) {
                console.log(d); 
                console.log($("#pokojeMale").html()); 
                $("#pokojeMale").html(d);
            }               
        }
    });  
}
setInterval(function() { wyswietlanie_pokoi() }, 1000);
</script>

的PHP / pokoje.php:

<?php
require_once('config.php');

// dane wejsciowe 
$zwrot = "";
$dane = isset($_POST['dane']) ? $_POST['dane'] : '';
$id = $_COOKIE['id_gracza'];

$sql = "SELECT * FROM pokoje WHERE czyAktywny = '1'";
$wynik = mysqli_query($conn, $sql);

$sql2 = "SELECT * FROM pokoje WHERE idGracza1 = '$id' OR idGracza2 = '$id' OR idGracza3 = '$id' OR idGracza4 = '$id'";
$result = mysqli_query($conn, $sql2);
$pokoje = array();

// pokój w ktorym jest juz ten gracz
if (mysqli_num_rows($result) > 0) {
    while ($row = $result->fetch_assoc()) {
        array_push($pokoje, $row['id']);
    }
}

// glowna pętla
// kazdy pokoj oddzielnie
if (mysqli_num_rows($wynik) > 0) {
    while ($row = $wynik->fetch_assoc()) {
        $zwrot .= '<div class="pokoj">';
        $zwrot .= '<div class="numer"><span>' . $row['numer'] . '</span></div>';
        $zwrot .= '<div class="iloscGraczy"><span class="ilosc">' . $row['ilosc_Graczy'] . '/4 </span>';

        // jesli pokoj ma mniej niz 4 graczy i dany gracz w nim nie jest
        // dodaje diva dzieki ktoremu mozna dolaczyc do pokoju
        if ($row['ilosc_Graczy'] != "4" && !in_array($row['id'], $pokoje)) {
            $zwrot .= '<div class="dolacz" onClick="dolaczanie(' . substr($row['numer'], 1) . ')"><span>Join</span></div>';
        }

        $zwrot .= "</div>";

        // jesli pokoj jest prywatny, dodaje klodke obok niego
        if ($row['czyPrywatny'] == "1") {
            $zwrot .= '<div class="klodka"><span><img src="img/prywatny.png" width="15px" height="20px"></span></div>';
        }

        $zwrot .= "</div>";
    }

    // skrypt dzieki ktoremu po najechaniu na pokoj, mozna do niego dolaczyc
    // narazie wszystko psuje
    $zwrot .= '<script type="text/javascript">
    $(".pokoj").mouseover(function(){
        console.log("najazd");
        if ($(this).find(".dolacz").length > 0) {
            $(this).find(".ilosc").css("display", "none");
            $(this).find(".dolacz").css("display", "block");
        }              
    });
    $(".pokoj").mouseout(function(){
        console.log("odjazd");
        if ($(this).find(".dolacz").length > 0) {
            $(this).find(".ilosc").css("display", "block");
            $(this).find(".dolacz").css("display", "none");
        }
    });
    </script>';
} else {
    $zwrot = 'Oooopss... there is no active room at the moment, you can create your own, or check later.';
}

// jesli dane wejsciowe nie sa takie same jak zwrotne
// zwroc $zwrot
if ($dane != $zwrot) {
    echo $zwrot;    
} 
// zamyka polaczenie z baza danych
mysqli_close($conn);
die();

0 个答案:

没有答案