Статьи

Динамически загружать содержимое ящика с помощью AJAX

Январь 11, 2019

Таким образом вы можете создавать элементы страничного блока, которые загружаются через AJAX и могут быть обновлены мгновенно без перезагрузки всей страницы. Он использует комбинацию кода jQuery и JavaScript. Это похоже на загрузчик содержимого в Facebook, но я сам написал его с нуля.

Преимущества использования этого метода AJAX

  • Страница загружается быстрее, потому что она загружает поля содержимого после того, как DOM готов
  • Содержимое в поле можно перезагрузить без перезагрузки всей страницы
  • Все сайты движутся к этому, такие как Facebook, Twitter, Odesk и т. Д.
  • Новые поля могут быть добавлены без необходимости дальнейшего кодирования CSS или JavaScript

Как это устроено

loading-new-blogs

new-blogs

  • После загрузки веб-страницы jQuery вызывает функцию AJAX для каждого загружаемого блока.
  • Сообщение о загрузке отображается
  • Файл сценария на стороне сервера (например, PHP) возвращает HTML-код для поля
  • Контент загружается в поле на веб-странице
  • Содержимое может быть легко перезагружено, когда пользователь наведет курсор на поле, в котором появится изображение обновления, и после щелчка содержимое обновится

Посмотреть демо
Скачать исходные файлы

Как это динамично?

Каждый блок — это div, который содержит атрибут id, который однозначно идентифицирует этот блок. Каждый элемент внутри этого div называется с этим идентификатором div. JQuery выбирает этот идентификатор и использует его для сопоставления со сценарием на стороне сервера (например, PHP), совпадает с идентификатором блока и загружается. Это делает его динамическим, потому что все переменные создаются на основе идентификатора блока.

код JQuery

Эта функция загружается после загрузки веб-страницы и инициализирует поля для использования прикрепленных событий. 

jQuery(document).ready(function($) { //event to show the box controls when the mouse hovers the box //applies to all elements with class="box" $('.box').mouseover(function(){ //replace string "box" with "controls" var dyn_var = "#" + this.id.replace("box","controls"); $(dyn_var).show(); }); //initialize box controls $('.box .controls').hide(); //hide all box controls //hide box when mouse exits box $('.box').mouseout(function(){ $('.box .controls').hide(); }); //load box content (loads after page loads) loadboxcontent('box-id1'); loadboxcontent('box-id2'); //etc... });

Эта функция принимает идентификатор элемента div и загружает содержимое в дочерний элемент div с параметром id = box_id. Его можно применять к любому элементу управления box, поскольку он динамически создает переменные js для захвата объектов.

идентификатор контейнера div = box_id
php script name = box_id.php 

 function loadboxcontent(box_id){ //perform an initial check to see if box_id has been supplied if (box_id == '') { return false; } //show loading image var loading_image="/images/loader.gif"; //Full URL to "loading" image. var loading_text = ' 
  Загрузка '+ box_id.replace (/ - / g, "") +' ... 
  «;
	 var script_path = "../php/";  // путь к скрипту на стороне сервера
	 var box_container = document.getElementById (box_id);
	 box_container.innerHTML = loading_text;

	 // записать результат запроса AJAX
	 // (async = false) они загружаются по порядку и ждут окончания предыдущего
	 // (async = true) они все загружаются одновременно
	 var result = false;
     $ .Ajax ({
       url: script_path + box_id + ". php",
       тип: 'POST',
       асинхронно: верно,
       данные: {блоги: 30},
       success: function (data) {
      	  результат = правда;
      	  document.getElementById (box_id) .innerHTML = data;
       }
     });
     if (result == false) {document.getElementById (box_id) .innerHTML = ' 
  Не удалось обновить данные, попробуйте обновить страницу 
  «;  }
     else {alert («Содержание обновлено успешно!»);  }
 }

HTML код

39
Share: