JQuery: обновляем контент по таймеру и по выбору пользователя

Два простейших примера по subj, понадобились в работе.

Везде предполагается, что:

1) мы выполняем приложение не просто "открыв файл .html в браузере", а установив и запустив локальный сервер, поместив файлы в нужную папку внутри корневой папки сервера (например, с именем ex1), а затем уже набрав в браузере URL-адрес вида localhost/ex1/

2) все файлы представлены в кодировке Юникода UTF-8 и имеют стандартное HTML-обрамление, которое я здесь не привожу

3) все файлы примера находятся в одной папке и в этой же папке располагается библиотека JQuery:

<script type="text/javascript" src="jquery.js"></script>

Разумеется, можно указать и другой путь для подключения JQuery.

Примеры "JQuery без JQuery" и простейшей загрузки данных с помощью JQuery по клику на кнопке есть в этой заметке.

1. Динамическое обновление контента по таймеру

Сделаем простейшие идущие часики с помощью JQuery, причём, время будет формироваться на стороне сервера, а не нашей (и выводиться в соответствии с часовым поясом, выбранным в настройках сервера).

Код в файле index.html:

<div id="content"></div>
<script>
 function show() {
  $.ajax ({
   url: "time.php",
   cache: false,
   success: function(html) {
    $("#content").html(html);
   }
  });
 }
 $(document).ready(function() {
  show();
  setInterval ('show()',1000);
 });
</script>

Код файла time.php:

<?php echo date("H:i:s"); ?>

2. Динамическое обновление контента по выбору пользователя

Нажав одну из двух кнопок, пользователь сможет выбрать, какую страницу ему открыть.

Код в файле index.html:

<p>Какую страницу желаете открыть?</p>
<form>
 <input id="btn1" type="button" value="Страница 1"> 
 <input id="btn2" type="button" value="Страница 2">
</form>
<div id="content"></div>
<script>
 $(document).ready(function() {
  $('#btn1').click(function() {
   $.ajax({
    url: "page1.html",
    cache: false,
    success: function(html) {
     $("#content").html(html);
    }
   });
  });
  $('#btn2').click(function() {
   $.ajax({
    url: "page2.html",
    cache: false,
    success: function(html) {
     $("#content").html(html);
    }
   });
  });
 });
</script>

page1.html и page2.html - любые файлы в формате HTML из этой же текущей папки.

06.06.2019, 21:04 [3382 просмотра]