使用AJAX设置间隔

Question

The purpose is to display a DIV when you click on a button and then display text inside that DIV that comes from my database. Thing is that data in databse changes, so text inside that div also. I would need a setInterval... with AJAX

I'm new in javascript and don't know the good way to go...

HTML:

<div onClick="showDiv();"> click </div>

<div style="display: none;" id="div"> 
Info from database:
<span style="display: hidden;" id="data1"> DATA 1 </span>
<span style="display: hidden;" id="data2"> DATA 2 </span>
</div>

javascript:

function showDiv()
{
document.querySelector("#div").style.display = "block";
setInterval(function () {getData()}, 1000);
}

function getData()
{

$.post(
            'process.php', 
            {

            },

            function(data){

                if(data == '1'){
                     document.querySelector("#data1").style.display = "inline";
                }
                else if(data == '2'){
                     document.querySelector("#data2").style.display = "inline";
                }


            },

            'text'
         );

         return false;

}

//don't know how to just take data from database without sending by POST or GET.

php:

<?php

    SELECT x FROM database

    if(x == 1)
    {echo '1';}

    else if(x == 2)
    {echo '2';}

    ?>

Answer 1

1. Get data using AJAX : Learn here . Your code to setInterval() is correct or you can do this : setInterval(getData,1000);

2. Display data in span s :

   document.getElementById("data1").innerHTML = "your content from database"; document.getElementById("data2").innerHTML = "your content from database";

Answer 2

You're not giving a lot of info so I will give you a basic example of getting data from a mySQL database with jQuery, Ajax and PHP.

First you need to include jQuery to the head of your document

<script src="http://code.jquery.com/jquery-latest.js"></script>

And then use Ajax

function showDiv(){

    document.getElementById("div").style.display = "";
    setInterval(function (){ getData('something'); }, 1000);
}

jQuery.noConflict();
jQuery(document).ready(function($){

    getData = function(variable){

        var postVar = variable;
        var postVar2 = "exemple";

        $.ajax({
            type: "POST",
            url: "php/file.php",

            data:   'variable=' + postVar + "&" +
                    'variable2=' + postVar2,

            success: function(data){

                data = $.trim(data);
                var dataSplit = data.split("++==09s27d8fd350--b7d32n0-97bn235==++");

                if(dataSplit[0] == "1"){
                    document.getElementById("data1").innerHTML = dataSplit[1];
                }
                if(dataSplit[0] == "2"){
                    document.getElementById("data2").innerHTML = dataSplit[1];
                }
            }
        });

    }

});

Finally, you need to create an external php file (in this example "file.php" in the folder "php") to get the data from your database with mysqli

<?php

// to prevent error, I check if the post variable is set and 
// if it's not only full of spaces

if(isset($_POST['variable']) && preg_replace("/\s+/", "", $_POST['variable']) != ""){

    $con = mysqli_connect("hostname", "username", "password", "database_name");

    $query = mysqli_query($con, "SELECT * FROM `table_name` WHERE `column_name` = '".$_POST['variable']."'");

    $results = array(); $row = 0;
    while($info = mysqli_fetch_array($query, MYSQLI_ASSOC)){

        $results[$row] = array();
        $results[$row]['column_name1'] = $info['column_name1'];
        $results[$row]['column_name2'] = $info['column_name2'];

        $row++;
    }

    foreach($results as $result => $data){

        echo "1" . "++==09s27d8fd350--b7d32n0-97bn235==++" .

        '<div>'.$data['column_name1'].'</div>'.
        '<div>'.$data['column_name2'].'</div>';
    }
}

?>

Hope it helps!