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

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

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

Для этой проблемы рассмотрим эту ДЕМО

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

$(function(){ // don't cache ajax or content won't be fresh $.ajaxSetup ({ cache: false }); var ajax_load = "<img src='http://img.ruphp.com/jquery/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 }); 

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

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

Обновить

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

 $("#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's complete setTimeout(worker, 5000); } }); })(); 

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

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

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

У этого есть ДАННАЯ соответствующая демонстрация.

Вы можете прочитать о 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 .

Я думаю, вы бы хотели сначала изучить 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();