Как автоматически обновлять каждые 10 секунд несколько делений с одинаковым классом и разными идентификаторами

Question

У меня есть несколько div с одним и тем же классом и разными идентификаторами, и я хочу менять содержимое div автоматически каждые 10 секунд.нужно опубликовать div id на моей странице php и обновить результат до div ...

<div class="sayac" id="1">data1</div>
<div class="sayac" id="2">data2</div>
<div class="sayac" id="3">data3</div>
<div class="sayac" id="4">data4</div>

Answer 1

Быстрый способ будет:

setInterval(function(){
    $('.sayac').each(function(index, el) {
        var thisID = $(this).attr('id');
          $.post( "path/to/file.php", { 
            id: thisID
          })
          .done(function(data, status) {
            $('#'+thisID).html(data); //$(this) will not work here
          })
          .fail(function(data, status) {
            console.log( "error" );
          });
    });
},10000);

Но обработка ошибок невелика. Я бы также предложил, чтобы ваши php были в json. Таким образом, вы можете вернуть массив и заставить ваш код реагировать соответствующим образом.

Answer 2

Здесь вам просто нужно использовать setInterval() с функцией ajax, чтобы обновить ваш div, пожалуйста, попробуйте

$(document).ready(function () {
  var mayVar = setInterval(refreshDiv,10000);
  
});
function refreshDiv(){
//you can call here ajax to refresh every 10 seconds
    $('#1').html(Math.random().toString(36).substr(2, 5));
    $('#2').html(Math.random().toString(36).substr(2, 5));
    $('#3').html(Math.random().toString(36).substr(2, 5));
    $('#4').html(Math.random().toString(36).substr(2, 5));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sayac" id="1">data1</div>
<div class="sayac" id="2">data2</div>
<div class="sayac" id="3">data3</div>
<div class="sayac" id="4">data4</div>