Question

目的是在您单击按钮时显示DIV，然后在来自我的数据库的DIV中显示文本。事实是数据库中的数据会发生变化，因此div中的文本也会发生变化。我需要一个带有AJAX的setInterval ...

我是javascript的新手，不知道要走的好方法......

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;

}

//不知道如何从数据库中获取数据而不通过POST或GET发送。

PHP：

<?php

    SELECT x FROM database

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

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

    ?>

Answer 1

使用AJAX获取数据：Learn here。您的setInterval()代码是正确的，或者您可以执行此操作：setInterval(getData,1000);
在span s中显示数据：

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

Answer 2

您没有提供大量信息，因此我将为您提供一个使用jQuery，Ajax和PHP从mySQL数据库获取数据的基本示例。

首先，您需要将jQuery包含在文档的头部

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

然后使用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];
                }
            }
        });

    }

});

最后，您需要创建一个外部php文件（在此示例中为“php”文件夹中的“file.php”）以使用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>';
    }
}

?>

希望它有所帮助！

使用AJAX设置间隔

2 个答案: