使用 AJAX 设置间隔答案

【问题标题】：Set interval with AJAX使用 AJAX 设置间隔
【发布时间】：2014-08-18 21:28:45
【问题描述】：

目的是在您单击按钮时显示一个 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';}

    ?>

【问题讨论】：

问题到底是什么？就 php 而言，XMLHttpRequest 与提交 html 表单相同
这是关于在不发布数据的情况下使用$.post。

标签： javascript php html ajax

【解决方案1】：

使用 AJAX 获取数据：Learn here。您对setInterval() 的代码是正确的，或者您可以这样做：setInterval(getData,1000);
在spans 中显示数据：

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

【讨论】：

非常感谢您清除它！这个$.post 怎么样？确实不太合适，因为我不发数据，就等着点一下吧……
@thecbuilder - 不是document.getElementById("data1").innerHtml("your content");，是document.getElementById("data1").innerHTML = "your content";
@pmrotule 谢谢。混合js和jquery！
@user1824508 因此，当您单击时，应该向服务器发送 ajax 请求，并且 $.post 会为您执行此操作。
@thecbuilder 我知道我很讨厌，抱歉，但 .innerHtml 应该是 .innerHTML

【解决方案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>';
    }
}

?>

希望对你有帮助！

【讨论】：