2017-11-08 7 views
2

私はテキストをスライドさせるためにjQueryを使用しています。参考:http://kenwheeler.github.io/slick/jQuer Slickスライダーデータは、毎秒setIntervalでAjaxから取得します。

そして今、私はデータをデータベースから取得するには、毎秒setIntervalのjQuery Ajax Auto Refreshを使用してください。

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> 

現在の状態は、すべてのデータが直接表示されます。私が望むのは、データをスライドさせるために別々に表示されるということです。

可能ですか?

答えて

2

私があなたを正しく理解していれば。毎秒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 

に、必須ではありません0
SELECT * FROM tb_running_texts ORDER BY RAND() LIMIT 1 
関連する問題