Обновление данных на странице без обновления

У меня есть сайт, где мне нужно обновить статус. Как для полета, вы улетаете, путешествуете или приземляетесь. Я хочу обновить статус, не имея своих зрителей, чтобы загрузить и перезагрузить всю страницу. Я знаю, что есть способ сделать это с AJAX и jQuery, но у меня нет никакого понимания того, как это работает. Я также не хочу, чтобы они были и нажмите кнопку. Если кто-то знает, как это сделать, я очень ценю это!

Ответ 1

В общем, если вы не знаете, как это работает, найдите пример, из которого вы можете узнать.

Для этой проблемы рассмотрите этот DEMO

Вы можете видеть, что загрузка содержимого с помощью AJAX очень легко выполняется с помощью jQuery:

$(function(){
    // don't cache ajax or content won't be fresh
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";

    // load() functions
    var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
    $("#loadbasic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

// end  
});

Попытайтесь понять, как это работает, а затем попытайтесь воспроизвести его. Удачи.

Вы можете найти соответствующий учебник ЗДЕСЬ

Update

В настоящее время следующее событие запускает функцию ajax load:

$("#loadbasic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

Вы также можете делать это периодически: Как запускать запрос AJAX Периодически?

(function worker() {
  $.ajax({
    url: 'ajax/test.html', 
    success: function(data) {
      $('.result').html(data);
    },
    complete: function() {
      // Schedule the next request when the current one complete
      setTimeout(worker, 5000);
    }
  });
})();

Я сделал демонстрацию этой реализации для вас ЗДЕСЬ. В этой демонстрации каждые 2 секунды (setTimeout(worker, 2000);) содержимое обновляется.

Вы также можете сразу загрузить данные:

$("#result").html(ajax_load).load(loadUrl);

Что имеет ЭТО соответствующая демонстрация.

Ответ 2

Вы можете прочитать о jQuery Ajax с официального сайта jQuery: https://api.jquery.com/jQuery.ajax/

Если вы не хотите использовать какое-либо событие click, вы можете установить таймер для периодического обновления.

Ниже приведен код, который может помочь вам просто привести пример.

function update() {
  $.get("response.php", function(data) {
    $("#some_div").html(data);
    window.setTimeout(update, 10000);
  });
}

Выше функция вызовет через каждые 10 секунд и получит контент из response.php и обновит его в #some_div.

Ответ 3

Я думаю, вы бы хотели узнать ajax, попробуйте следующее: Ajax Tutorial

Если вы хотите знать, как работает ajax, это не очень хороший способ напрямую использовать jQuery. Я поддерживаю, чтобы узнать родной способ отправить запрос ajax на сервер, увидеть что-то о XMLHttpRequest:

var xhr = new XMLHttpReuqest();
xhr.open("GET", "http://some.com");

xhr.onreadystatechange = handler; // do something here...
xhr.send();