Question

我正在使用jQuery光滑来滑动我的文字。参考：http://kenwheeler.github.io/slick/

现在我希望每秒使用setInterval jQuery Ajax自动刷新从数据库动态获取数据。

JS

setInterval(function()
    {
        $.ajax(
        {
            url: "test",
            type: "POST",
            data:
            {
            },
            dataType: "JSON",
            success: function (jsonStr)
            {
                $('.card').empty();
                for(var i=0; i<jsonStr.runningText.length; i++)
                {
                    $('.card').append(jsonStr.runningText[i]);
                }
            }
        });
    }, 1000);

test.php的

$q = mysqli_query($con, "
SELECT * FROM tb_running_texts
");
while($dQ = mysqli_fetch_array($q))
{
    $runningText[] = $dQ['running_text'];
}

$data = array(
    "runningText"     => $runningText
);

echo json_encode($data);

和JS光滑

$('.lazy').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 5000,
    });

HTML

<div class="lazy slider">
   <h1 class="card"></h1>
</div>

目前的情况是所有数据都会直接显示。我想要的是数据将分别显示为幻灯片。

有可能吗？

Answer 1

如果我理解你的话。您希望每秒只记录一条记录，但不一样。

首先，如果你想要每次都不同，那么你需要这样做：

    var offset = 0;
    setInterval(function()
    {
        $.ajax(
        {
            url: "test",
            type: "POST",
            data:
            {
                offset: offset
            },
            dataType: "JSON",
            success: function (jsonStr)
            {
                offset += 1;

                $('.card').empty();

                $('.card').append(jsonStr.runningText);

            }
        });
    }, 1000);

然后PHP

$offset = isset($_POST['offset']) ? $_POST['offset'] : 0;

$q = mysqli_query($con, "
SELECT * FROM tb_running_texts ORDER BY date_time DESC LIMIT 1 OFFSET $offset
");

while($dQ = mysqli_fetch_array($q))
{
    $runningText[] = $dQ['running_text'];
}

$data = array(
    "runningText"     => $runningText
);

echo json_encode($data);

如果您希望每次都随机，则不需要偏移，更改行

SELECT * FROM tb_running_texts ORDER BY date_time DESC LIMIT 1 OFFSET $offset

要

SELECT * FROM tb_running_texts ORDER BY RAND() LIMIT 1

jQuer Slick滑块数据每秒从Ajax获取setInterval

1 个答案: