Ajax load


Осуществляет запрос к серверу без перезагрузки страницы. Получает HTML-данные от сервера и помещает их внутрь выбранных элементов.

По умолчанию выполняется как запрос типа GET, однако, если будут переданы дополнительные данные в форме объекта, пар ключ/значение, то операция выполнится как запрос типа POST. Дополнительные параметры, указанные как строка, НЕ приведут к запросу типа POST. Функция имеет несколько необязательных параметров.

  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, …}.
  • complete (data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)

Этот метод является самым простым способом извлечения данных с сервера. Он представляет из себя альтернативу использования метода $.get(url, data, success). В случае успешного запроса, метод .load() формирует HTML содержание, которое может быть вставлено на страницу. Это значит, что мы можем делать запросы следующим образом:

Если селектора не существует — в нашем случае, если в документе нет блока с id=»result» — Ajax запрос не будет выполнен.

Функция обратного действия

Если задана функция обратного действия «complete», она будет выполнена после того как сформируется и вставится на страницу HTML содержимое. Она запускается для каждого объекта коллекции jQuery.

В случае, если блока с id=»result» не существует, запрос не будет выполнен.

Загрузка фрагмента страницы

Метод .load() позволяет загружать в выбранный элемент только часть страницы ( чего нельзя сделать с $.get() ). Для этого необходимо после адреса файла указать селектор той области страницы, которую нужно извлечь.

В этом примере со страницы test.html будет загружен HTML фрагмент из блока с id=»container». Сначала метод извлекает содержимое файла ajax/test.html, в потом jQuery парсит результат и, благодаря селектору, находит тот фрагмент, который нужен. Найденный фрагмент будет вставлен на страницу, всё остальное будет опущено.

Выполнение скрипта


При использовании метода .load() с указанием селектора, контент будет пропущен через метод .html(), таким образом все скрипты будут удалены. При загрузке без селектора, все скрипты будут загружены в соответствии с приоритетом.

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

Но, в следующем случае, скрипты загруженного документа, прикреплённого к элементу #b не будут выполнены:

 

codernote.ru

Этот метод самый простой способ получить данные с сервера. Он примерно эквивалентен коде $.get(url, data, success), за исключеничем того что этот метод а не глобальная функция и неявный обработчик обратного вызова. Когда возвращается успешный ответ (т.е. когда значение textStatus равно «success» или «notmodified»), .load() устанавливает HTML содержимое в указанный элемент из возвращенных данных. Это означает, что в большинстве случаев, использование этого метода будет выглядеть следующим образом:

Если не будет найден элемент соотвествующий заданному селектору, то, в этом случае, Ajax запрос не будет отправлен.

Функция обратного вызова

Если функция «complete» задана, то она выполняется после обработки и вставки HTML. Эта функция будет вызвана для каждого элемента в коллекции jQuery и this


внутри нее будет указывать на DOM элемент.

В этих примерах выше, если текущий документ не содержит элемента с ID равным «result,» то метод .load() не выполнится.

Метод запроса

Метод POST будет исползован если в метод .load() передан объект, иначе будет использован GET.

Загрузка фрагмента страницы

Метод .load(), в отличие от $.get(), позволяет указать часть удаленного документа для вставки. Это доступно при помощи специального синтаксиса в параметре url. Если один или несколько символов пробела включены в строку, то первое слово, после первого пробела, будет предполагать jQuery селектор, который определит какая часть будет вставлена.

Мы можем изменить код из примера выше, так чтобы использовалась только часть полученного документа:

Когда этот методы выполняется, извлекается содержимое ajax/test.html, но затем jQuery разбирает полученный документ и ищет элемент с ID равным container. Этот элемент, со всем своим содержимым, будет вставлен в элемент с ID равным result и остальная часть загруженного документа будет проигнорирована.

jQuery используется свойство браузера .innerHTML, чтобы проанализировать полученный документ и вставить его в текущий документ. Во время этого процесс, браузре часто отфильтровывает такие элементы из документа как: <html>


, <title> или <head>. В результате, элемент полученный при помощи метода .load() может быть не таким же, как если получить этот документ в браузере напрямую.

Выполнения скриптов

Когда вызван .load() при помощи URL без выражения селектора, содержание передается в .html() до удаления скриптов. Это выполняется блоки скриптов, до их удаления. Если .load() вызван с выражением селектора в URL, то скрипты скрипты будут удалены до обновления DOM и поэтому не будут выполнены. Пример для обоих случае приведен ниже:

Здесь, любой JavaScript загруженный в #a как часть документа будет успешно выполнен.

В следующем случае, блоки скрипта перед вставкой в #b будут удалены и не будут выполнены:

jquery-docs.ru

Функция обратного действия

Если задана функция обратного действия «complete», она будет выполнена формирования и вывода HTML. Она будет запускаться для каждого объекта коллекции jQuery.

Если в документе нет элемента с ID «result,» метод .load() не будет выполнен.

Метод запроса

В случает использования объекта в качестве второго аргумента, то будет выполнен метод POST; в противном случае, GET.

Загрузка фрагмента страницы


Метод .load() в отличии от $.get(), позволяет нам извлечь часть загружаемой страницы. Этого можно достичь, если после адреса файла указать селектор той области страницы, которую нужно извлечь.

Мы можем чуть исправить пример, указанный выше, чтобы извлечь только часть документа:

При выполнении, метод извлекает содержимое файла ajax/test.html, но потом jQuery парсит результат и, благодаря селектору, находит тот фрагмент, который нужен. Только это содержание в результате будет вставлено на страницу, всё остальное будет опущено.

Выполнение скрипта

При использовании метода .load() с указанием селектора, контент будет пропущен через метод .html(), таким образом все скрипты будут удалены. При загрузке без селектора, все скрипты будут загружены в соответствии с приоритетом:

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

Однако, в следующем случае, скрипты загруженного документа, прикреплённого к элементу #b не будут выполнены:

ruseller.com

Позвольте мне немного разъяснить вам кое-что:

$.ajax() — базовая и низкоуровневая функция ajax, предоставляемая jQuery, что означает, что вы можете делать то, что захотите, чтобы вы могли работать с объектом XmlHttpRequest


. Но однажды разработчики jQuery подумали, что, помимо $.ajax(), они могут предоставить разработчикам более конкретные методы, поэтому им не нужно будет передавать больше параметров, чтобы метод $.ajax() работал так, как они хотят. Например, они сказали вместо передачи json в качестве параметра $.ajax() для указания типа данных возврата, они предоставили $.getJSON(), поэтому мы все знаем, что возвращаемый тип, который мы ожидали, был json или вместо указания метода отправки как post или get, вы можете использовать $.post() или $.get() соответственно.

Итак, load() — это одно и то же, оно может помочь вам вставлять html-данные в ваш html. с помощью метода load() вы знаете, что ожидается часть html.

Разве это не круто?

Я думаю, что меня влюбило.

Для получения дополнительной информации вы можете посетить jquery.com, они даже предоставляют свою новую библиотеку и страницу api tutorial.

Изменить:

 $.ajax({  type: "POST",  url: "some.php",  data: "name=John&location=Boston",  success: function(msg){  alert( "Data Saved: " + msg );  }  });  

является таким же, как показано ниже:

$.post("some.php", { name: "John", time: "2pm" },  function(data){  alert("Data Loaded: " + data);  });   

Теперь, когда вы видите, что это упрощенная версия $.ajax(), чтобы выполнить пост-вызов, вам необходимо передать некоторую информацию типа метода отправки, которая post, как показано в первом примере, но вместо этого вы может использовать $.post(), потому что вы знаете, что вы делаете, это post, поэтому эта версия упрощена и удобна в работе.

Но не забывайте что-то. За исключением load(), все остальные методы ajax возвращают XHR (экземпляр XmlHttpRequest), поэтому вы можете относиться к ним так, как если бы вы работали с XmlHttpRequest, на самом деле вы работаете с ним tho:), но load() возвращает jQuery, что означает:

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } ); 

в приведенном выше примере, вы можете легко ввести возвращаемый html в элемент #objectID. Разве это не круто? Если он не возвращал jQuery, вы должны были работать с функцией обратного вызова, где вы, вероятно, получите результат из подобного объекта data и вводите его вручную в элемент html, который вы хотите. Так что это будет хлопот, но с помощью метода $.load(), это действительно упрощается в jQuery.

$("#feeds").load("feeds.php", {limit: 25}, function(){  alert("The last 25 entries in the feed have been loaded");  });  

Вы даже можете отправлять параметры, поэтому в соответствии с этими параметрами вы можете выполнить некоторую работу на стороне сервера и отправить часть html обратно клиенту, а ваш симпатичный код jQuery берет его и вводит в элемент #feeds


html в примере прямо выше.

qaru.site

jQuery — метод load

Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.

Метод load имеет следующий синтаксис:

  .load(url [,data] [,complete])  // параметры в квадратных скобках являются необязательными  //url - строка, содержащая URL адрес, на который необходимо отправить запрос  //data (необязательный параметр) - данные, которые необходимо послать на сервер (в формате строки или объекта)  //complete – дополнительные действия, которые необходимо выполнить после завершения запроса (указываются посредством функции Function(responseText, textStatus, xhr))   // responseText - ответ сервера   // textStatus - статус ответа   // xhr - XMLHTTPRequest объект  

В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.

Примеры использования метода load

1. Вставить содержимое файла asidenav.tpl


в блок c id="asidenav" после загрузки DOM страницы:

  <div id="asidenav"></div>  ...  <!-- После подключения библиотеки jQuery -->  <script>  // после загрузки DOM страницы  $(function() {   // вставить в элемент (#asidenav) контент файла asidenav.tpl   // если файл не находится в той же директории что и HTML документ, то необходимо дополнительно указать путь к нему   $('#asidenav').load('asidenav.tpl');  });  </script>  

2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:

  <div id="ajaxcontent">   <button id="ajaxclick">Получить контент файла demo.html</button>  </div>  ...  <!-- После подключения библиотеки jQuery -->  <script>  $('#ajaxclick').click(function(){   // загрузить в элемент id="content1" часть файла demo.html (#content1)   $(this).parent().load('demo.html #content1');  });  </script>  

Контент файла demo.html:

  <!DOCTYPE html>  <html lang="ru">   <head>   <meta charset="utf-8">   <title>Файл demo.html</title>   </head>   <body>   <div id="content1">...</div><!-- Будет вставлен этот контент -->   <div id="content2">...</div>   </body>  </html>  

3. Загрузить в элемент, имеющий id="result"


ответ content.php. Данный ответ будет зависеть от значения атрибута data-content, которое имеет кнопка, пославшая AJAX-запрос на сервер.

  <button class="load-ajax-content" data-content="content1">Загрузить содержимое 1</button>  <button class="load-ajax-content" data-content="content2">Загрузить содержимое 2</button>  <button class="load-ajax-content" data-content="content3">Загрузить содержимое 3</button>  <!-- Элемент, в который будем загружать данные -->  <div id="result"></div>  ...  <!-- После подключения библиотеки jQuery -->  <script>  // при нажатии на кнопку, имеющую класс load-ajax-click  $('.load-ajax-content').click(function(){   // определим значение атрибута data-content   var dataContent = $(this).attr('data-content');   // запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result"   if (dataContent) {   $('#result').load('content.php','content='+dataContent);    }  });  </script>  

На сервере (файл content.php):

  <?php     // завершим работу php скрипта, если в суперглобальном массиве $_GET не существует ключа content   if (!isset($_GET['content'])) {   exit();  }    // получаем значение GET параметра и очищаем его от не желательного содержимого с помощью фильтра FILTER_SANITIZE_STRING  $content = filter_var($_GET['content'], FILTER_SANITIZE_STRING);     // массив, элементы которого содержат различный контент  $contents = array();  $contents['content1'] = 'Содержимое 1...';  $contents['content2'] = 'Содержимое 2...';  $contents['content3'] = 'Содержимое 3...';     // если значение GET параметра (ключ) присутствует в массиве, то вывести соответствующее ему значение  if (array_key_exists($content, $contents)) {   echo $contents[$content];  }     exit();  

4. Рассмотрим вышеприведённый пример, в котором передавать данные будем не в формате строки, а посредством объекта. Кроме этого выведем в консоль браузера дополнительные данные, такие как ответ сервера, статус ответа и объект XMLHTTPRequest.

  <!-- ... -->  <div id="error"></div>    <script>  // при нажатии на кнопку, имеющую класс load-ajax-click  $('.load-ajax-content').click(function(){   // определим значение атрибута data-content   var dataContent = $(this).attr('data-content');   // запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result"   if (dataContent) {   $('#result').load('content.php', {content: dataContent}, function(responseText, textStatus, xhr) {   console.log('responseText: ' + responseText); // ответ сервера   console.log('textStatus: ' + textStatus); // статус ответа   console.log(xhr); // XMLHTTPRequest объект   if (textStatus == "error") {   var msg = "Извините, но при загрузке произошла ошибка: ";   $("#error").html(msg + xhr.status + " " + xhr.statusText);   }   });   }  });  </script>  

На сервере (файл content.php):

  <?php     // завершим работу php скрипта, если в суперглобальном массиве $_GET не существует ключа content   if (!isset($_POST['content'])) {   exit();  }    // получаем значение POST параметра и очищаем его от не желательного содержимого с помощью фильтра FILTER_SANITIZE_STRING  $content = filter_var($_POST['content'], FILTER_SANITIZE_STRING);     //...  

jQuery — функция get

Функция get предназначена для загрузки данных с сервера посредством HTTP GET запроса.

Синтаксис функции get:

  $.get(url [,data] [,success] [,dataType]);  // назначение параметров url и data аналогичны тем, которые приведены в описании функции load  // success - функция обратного вызова, которая выполнится в случае успешного завершения запроса: function(data, textStatus, xhr):   // data - ответ сервера   // textStatus - статус ответа   // xhr - XMLHTTPRequest объект  // dataType - принудительно указать тип данных, который должен прийти с сервера.    // 2 способ передачи параметров функции get (в формате объекта)  $.get([settings]);  

По умолчанию функция get пытается автоматически определить формат полученных с сервера данных (xml, json, script, text или html). Осуществляет она это на основании MIME-типа ответа.

Например, для того чтобы функция get определила, что формат данных, который она получила с сервера, соответствует JSON, на стороне сервере в скрипте php должен быть установлен соответствующий заголовок:

  header('Content-Type: application/json');  echo json_encode(array('test' => 'text...'));  

В jQuery обработать отложенные события AJAX можно также с помощью Promise методов done (при успешном ответе), fail (при ошибке), always (при успешном ответе или при ошибке).

  var xhr = $.get([settings])   .done(function() {   // действия при успехе   })   .fail(function() {   // действия при ошибке   })   .always(function() {   // действия при успехе или при ошибке   });     xhr.always(function() {   // ещё одни действия при успехе или при ошибке   });  

Примеры использования функции get

1. Подгрузим в HTML элемент после загрузки страницы содержимое файла content.tpl:

  <!-- Элемент, в который будем загружать данные -->  <div id="content"></div>  ...  <!-- После подключения библиотеки jQuery -->  <script>  // после загрузки  $(function(){   // выполним AJAX-запрос на сервер, используя метод GET   $.get({   url: 'content.tpl', // URL-запроса   success: function(data) { // при успешном ответе   // добавим в элемент полученные данные   $('#content').empty().append(data);    }   });  });  </script>  

2. AJAX получение каждые 5 секунд нового изображения (URL) из определённой директории на сервере и отображения её на странице (вместо предыдущей картинки).

  <!-- Элемент, в который будем выводить картинку -->  <div id="random-image"></div>  ...  <!-- После подключения библиотеки jQuery -->  <script>  // после загрузки  $(function(){   // создадим функцию, которая будет выполнять AJAX-запрос на сервер   var showRandomImage = function(){   // контент функции   $.get({   url: 'random-image.php', // URL-запроса   success: function(data) { // при успешном ответе    // если в элементе с id="random-image" нет элемента img   if ($('#random-image').find('img').length===0) {   // то добавим его и установим ему в качестве src полученное с сервера значения   $('#random-image').append('<img src="' + data + '" style="max-width: 300px">');   } else {   // если элемент img есть, то просто ему установим значение src   $('#random-image img').attr('src', data);    }   };   });   };   // выполним функцию    showRandomImage();   // будем выполнять функцию каждые 5 секунд   window.setInterval(showRandomImage,5000);   });  </script>  

Содержимое фала random-image.php:

  <?php  // находим изображения с расширением jpeg и png, расположенные в каталоге images относительно текущего пути  $images = glob(dirname(__FILE__).'/images/*.{jpeg,png}', GLOB_BRACE);  // получаем найденное количество файлов  $totalImg = count($images);  // возвращаем случайное число (изображение)  $randomImage = rand(0, $totalImg-1);  // получаем случайное изображение (URL)  $image = $images[$randomImage];  // заменяем обратный слэш на обычный  $imageUrl = str_replace('\','/',$image);   // удаляем из пути корневую директорию документа  $imageUrl = str_replace($_SERVER['DOCUMENT_ROOT'], '', $imageUrl);  // возвращаем URL картинки  echo $imageUrl;  // завершаем работу  exit();  

3. Пример, в котором реализуем AJAX подгрузку контента.

Данные для загрузки представим на сервере в виде массива $contents. Количество загружаемых данных и позицию смещения будем определять соответственно с помощью значений переменных count и offset. Обработку полученных с сервера данных будем осуществлять посредством Promise метода done.

  <!-- Элемент, в который будем загружать данные -->  <div id="contents"></div>  <!-- Кнопка для подгрузки данных в блок -->  <button class="load-ajax-content" data-content="content1">Ещё загрузить</button>  ...  <!-- После подключения библиотеки jQuery -->  <script>   // после загрузки   $(function () {   // количество элементов для загрузки   var count = 2;   // начальное смещение   var offset = 0;   // выполним AJAX-запрос на сервер, используя метод GET   // contents.php - URL запроса   // count и offset - данные, отправляемые на сервер    // метод done - для обработки успешного ответа от сервера   var getContents = function () {   $.get({   url: 'contents.php',   data: {'count': count, 'offset': offset}   })   .done(function (data) { // при успешном ответе   if (data) {   var output = ''; // результат, который добавим в элемент   offset += count; // увеличиваем смещение   // если у объекта data есть свойство btn-more, то скрываем кнопку   if (data.hasOwnProperty('btn-more')) {   $('.load-ajax-content').hide();   }   // обрабатываем полученные данные   if (data.hasOwnProperty('result')) {   for (var content in data['result']) {   output += '<h2>' + data['result'][content]['pagetitle'] + '</h2>';   console.log(content);   output += '<p>' + data['result'][content]['introtext'] + '</p>';   }   }   // вставляем результат в элемент с id="contents"   $('#contents').append(output);   }   });   };   // получаем первую порцию данных и вставляем их в страницу   getContents();   // добавляем контент на страницу при нажатии на кнопку "Ещё загрузить"    $('.load-ajax-content').click(function () {   getContents();   });   });  </script>  

Содержимое файла contents.php:

  <?php    // набор данных  $contents = array(   array(   'pagetitle' => 'Заголовок_1',   'introtext' => 'Описание_1...'   ),   array(   'pagetitle' => 'Заголовок_2',   'introtext' => 'Описание_2...'   ),   array(   'pagetitle' => 'Заголовок_3',   'introtext' => 'Описание_3...'   ),    array(   'pagetitle' => 'Заголовок_4',   'introtext' => 'Описание_4...'   ),    array(   'pagetitle' => 'Заголовок_5',   'introtext' => 'Описание_5...'   ),    array(   'pagetitle' => 'Заголовок_6',   'introtext' => 'Описание_6...'   ),   );    // получаем значение ключа count из GET массива (+очищающий фильтр)  $count = filter_var($_GET['count'],FILTER_SANITIZE_NUMBER_INT);  // получаем значение ключа offset из GET массива (+очищающий фильтр)  $offset = filter_var($_GET['offset'],FILTER_SANITIZE_NUMBER_INT);    // добавляем порцию данных, соответствующую ключам, в переменную output  $output = array('result' => array_slice($contents, $offset, $count));    // дополнительно добавляем в массив $output ключ btn-more, если больше нет данных   if (($offset+$count)>=count($contents)) {   $output['btn-more'] = 'hide';  }    // устанавливаем заголовок  header('Content-Type: application/json');  // кодируем массив $output в формате JSON  echo json_encode($output);  // завершаем работу скрипта  exit();  

jQuery — функция getJSON

Функция getJSON предназначена для загрузки JSON-кодированных данных с сервера посредством HTTP GET запроса.

Функция getJSON — идентична get, у которой в качестве значения параметра dataType установлено значение «json».

Синтаксис функции getJSON:

  $.getJSON(url [,data] [,success]);  // назначение параметров url, data и success аналогичны тем, которые приведены в описании функции get  

Пример c использованием функции getJSON

Пример, в котором после загрузки страницы выведем список страниц. Получать данные с сервера будем с помощью AJAX в формате JSON.

  <ul id="pages"></ul>  ...  <!-- После подключения библиотеки jQuery -->  <script>   // после загрузки   $(function () {   // AJAX-запрос с помощью функции getJSON   // url - адрес запроса   // success - обработка данных при успешном ответе сервера   $.getJSON({   url: 'pages.json',   success: function (data) {   // переменная, для хранения результата   var output = '';   // переберём все страницы   for (var i in data.pages) {   output += '<li><a href="' + data.pages[i].url + '">' + data.pages[i].title + "</a></li>";   }   // вставим список в элемент с id="pages"   $('#pages').empty().append(output);   }   });   });  </script>   

Содержимое файла pages.json:

  {   "pages": [   {"title": "Название статьи 1", "url": "/pages/1.html"},   {"title": "Название статьи 2", "url": "/pages/2.html"},   {"title": "Название статьи 3", "url": "/pages/3.html"},   {"title": "Название статьи 4", "url": "/pages/4.html"},   {"title": "Название статьи 5", "url": "/pages/5.html"}   ]    }   

jQuery — функция getScript

Функция getScript предназначена для загрузки JavaScript файла с сервера посредством HTTP GET запроса и его последующего выполнения.

Синтаксис функции getScript:

  $.getScript(url [,success]);  // url - URL-адрес скрипта  // success - функция Function(script, textStatus, xhr), которая будет выполнена после прихода успешного ответа от сервера   // script - текст скрипта   // textStatus - статус ответа   // xhr - объект XMLHTTPRequest  

Пример c использованием функции getScript

После загрузки страницы получим с помощью AJAX запроса скрипт и выполним его:

  <!-- После подключения библиотеки jQuery -->  <script>   // после загрузки   $(function () {   $.getScript('script.js');   });  </script>  

Содержимое скрипта script.js:

  $('body').css('background-color', 'lime');  

jQuery — функция post

Функция post предназначена для загрузки данных с сервера посредством HTTP POST запроса.

Синтаксис функции post:

  $.post(url [,data] [,success] [,dataType]);  // назначение параметров url, data, success, dataType аналогичны тем, которые приведены в описании функции get    // 2 способ передачи параметров функции post (в формате объекта)  $.post([settings]);  

Применение post ничем не отличается от использования jQuery-функции get. Единственное отличие между ними — это метод, с помощью которого они отправляют данные на сервер. Функция post отправляет данные в составе тела запроса (метод POST), а get — в составе URL (метод GET).

Примеры c использованием функции post

1. Пример, в котором пользователю предложим угадать наш цвет. Для этого ему на выбор предоставим несколько цветов с помощью радиокнопок и кнопку «Угадать». Отправку выбранного цвета на сервер будем осуществлять посредством функции jQuery post. На сервере осуществлять сравнивание «нашего цвета» и цвета, который выбрал пользователь, будем с помощью условия. В зависимости от того равны ли названия цветов, будем возвращать в качестве ответа значение success или error. На клиенте (в браузере) после получения ответа от сервера и в зависимости от его результата, будем выполнять те или иные действия. А именно, при получении ответа success, будем скрывать элементы управления, и выводить сообщение: «Да, вы угадали наш цвет!». В противном случае будем просто выводить текст: «Нет, наш цвет другой!».

  <div id="guess-color">   <p>Угадайте наш любимый цвет:</p>   <div>   <input type="radio" name="color" value="orange">Оранжевый<br>   <input type="radio" name="color" value="red">Красный<br>   <input type="radio" name="color" value="green">Зелёный<br>   <input type="radio" name="color" value="blue">Синий<br>   <button id="guess" type="button">Угадать</button>   </div>   <p id="result" style="color: firebrick"></p>  </div>  ...  <!-- После подключения библиотеки jQuery -->  <script>   // после загрузки   $(function () {   // при нажатии на кнопку   $('#guess').click(function () {   // в переменную color запишем выбранный цвет   // в переменную result элемент, имеющий id="result"   var color = $('input[name="color"]:checked').val(),   result = $('#result');   // очистим содержимое элемента, имеющего id="result"   result.empty();   // если пользователь не выбрал цвет, то выведем соответствующее сообщение   if (color === undefined) {   result.text('Вы не выбрали цвет!');   return;   }   // ajax-запрос с помощью jQuery-функции post   // url - адрес запроса   // data - отправляемые на сервер данные   // done - Promise метод, с помощью которого будем осуществлять обработку успешнего ответа от сервера    $.post({   url: 'guess-color.php',   data: {'color': color}   }).done(function (data) {   if (data === 'success') {   $('#guess-color *').not('#result').hide();   result.text('Да, вы угадали наш цвет!');   } else {   result.text('Нет, наш цвет другой!');   }   });   });   });  </script>  

Содержимое файла guess-color.php:

  <?php    // переменная, значение которой будем возвращать клиенту  $output = 'error';  // наш цвет  $ourColor = 'green';  // цвет, который выбрал пользователь  $color = $_POST['color'];  // запишем в переменную output строку success, если пользователь угадал цвет  if ($color == $ourColor) {   $output = 'success';  }  // выводим ответ  echo $output;  

2. Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через AJAX (jQuery функцию post). На стороне сервера сохранять имя пользователя будем посредством ссесий.

  <div id="user">   <p id="userinfo">Привет, <span id="username" style="font-weight: bold"></span>.</p>   <input type="text" name="name" title="Имя пользователя">   <input type="button" name="send" value="Отправить">  </div>  ...  <!-- После подключения библиотеки jQuery -->  <script>   // после загрузки   $(function () {   // функция для получения имени пользователя с помощью AJAX,   // а также для отправки значения поля input с name="name"    var getUserName = function(){   // получаем имя пользователя из поля input   var user = $('input[name="name"]').val();   // выполняем ajax-запрос на сервер   $.post({   url: 'username.php', // адрес зароса   data: {username: user}, // отправляемые данные на сервер   success: function (data) { // обработка данных при успешном ответе сервера   $('#username').text(data); // добавляем в элемент (id="username") имя пользователя   if (data!=='гость') { // скрываем элементы input, если пользователь не гость   $('#user input').hide();   }   }   });   };   // выполнить функцию getUserName   getUserName();   // при нажатию на кнопку "Отправить"   $('input[name="send"]').click(function(){   // выполнить функцию getUserName   getUserName();   });   });  </script>  

Содержимое файла username.php:

  <?php  // стартуем новую сессию  session_start();  // создаём переменную $username и помещаем в неё строковое значение гость  $username = 'гость';  // если существует сессионная переменная username  if (isset($_SESSION['username'])) {   // то присвоим переменной $username её значение   $username = $_SESSION['username'];  }  // если в суперглобальном массиве POST значение ключа username не пустое значение, то  if (!empty($_POST['username'])) {   // сохраним в переменную $username имя пользователя   $username = $_POST['username'];   // сохраним имя пользователя в сессионную переменную username   $_SESSION['username'] = $username;  }  // выведем имя пользователя (ответ, который получит клиент)  echo $username;   

itchief.ru

Возможности плагина Ajax Load More

Что ж, давайте посмотрим на сайте разработчика, что он нам предлагает.

  • шаблон — сниппет кода, который будет запускаться снова и снова в цикле вывода записей;

  • параметры в шорткоде — query параметры, которые передаются WordPress;

  • конструктор шорткода — многофункциональный конструктор, который поможет быстро создать пользовательский шорткод с нужными параметрами, включая тип записей, таксономии, настройки кнопки и прочее;

  • фильтрация — позволяет создать пользовательскую ajax навигацию с заданными параметрами;

  • REST API — доступ к сайту в JSON формате через REST API;

  • Кэширование — создает в кэше статические HTML страницы, уменьшая время загрузки;

И многие другие интересные вещи, включая функционал через дополнительные расширения.

Настройка плагина Infinite Scroll — Ajax Load More

Плагин устанавливается обычным способом. Он активно развивается и совместим с последней версией WordPress.

Шаблон вывода

По умолчанию, в пункте Repeater Templates нас ждет единственный дефолтный темплейт. К счастью, он абсолютно свободно редактируется, к тому же в редакторе с подсветкой синтаксиса.

Ниже нам сообщается, что мы можем доустановить специальное расширение Custom repeaters (платное), с помощью которого мы можем увеличить количество этих самых шаблонов.
Но нам это сейчас ни к чему.

Конструктор шорткода

Интересная страница с возможностями на все случаи жизни.
Примечательно, что все они опциональны, и никто не принуждает предварительно обходить все настройки.

Производим нужные настройки, копируем шорткод и вставляем на страницу.

Ajax load

Проверяем работу. Убеждаемся в том, что всё работает как положено.

Изменение шаблона по умолчанию

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

Один минус, для дополнительных шаблонов нужно докупить дополнение.

На своём сайте я использую стили Bootstrap, поэтому легко смог сделать простой вид Masonry c помощью класса Card. Загрузив следующий код в шаблон по умолчанию.

<div class="card" style="width: 20rem;">  <div class="card-block">  <h4 class="card-title"><?php the_title(); ?></h4>  <p class="card-text"><?php the_excerpt(); ?></p>  </div> </div>

Всё работает. Но опять же, хочется добавить фильтрацию по рубрикам.

Добавление фильтрации по рубрикам

Вот пример в официальной документации — Advanced Filtering.

Необходимо скопировать JS код с вкладки Code и загрузить данный скрипт себе на сайт.

А вот моя HTML разметка. Снова я использую элемент Card из Bootstrap для вывода фильтра категорий.

<div class="container"> 	<div class="card"> 	 <h3 class="card-header">Статьи на сайте</h3> 		<div class="card-block advanced-filter-wrap"> 			<ul class="list-unstyled advanced-filter-menu" data-type="checkbox" data-parameter="category"> 				<li> 					<input id="cat-null" name="checkbox-group" value="" type="checkbox">&nbsp;<label for="cat-null">Все категории</label> 				</li> 				<li> 					<input id="cat-bootstrap" name="checkbox-group" value="bootstrap" type="checkbox">&nbsp;<label for="cat-bootstrap">Bootstrap</label> 				</li> 				<li> 					<input id="cat-admin" name="checkbox-group" value="admin" type="checkbox">&nbsp;<label for="cat-admin">Администрирование</label> 				</li> 				<li> 					<input id="cat-bezopasnost" name="checkbox-group" value="bezopasnost" type="checkbox">&nbsp;<label for="cat-bezopasnost">Безопасность</label> 				</li> 				<li> 					<input id="cat-blogovedenie" name="checkbox-group" value="blogovedenie" type="checkbox">&nbsp;<label for="cat-blogovedenie">Блоговедение</label> 				</li> 				<li> 					<input id="cat-customize" name="checkbox-group" value="customize" type="checkbox">&nbsp;<label for="cat-customize">Настройка</label> 				</li> 				<li> 					<input id="cat-seo" name="checkbox-group" value="seo" type="checkbox">&nbsp;<label for="cat-seo">Продвижение</label> 				</li> 				<li> 					<input id="cat-devel" name="checkbox-group" value="devel" type="checkbox">&nbsp;<label for="cat-devel">Разработка</label> 				</li> 				<li> 					<input id="cat-speed" name="checkbox-group" value="speed" type="checkbox"><label for="cat-speed">Скорость загрузки</label> 				</li> 			</ul> 		</div> 		<div class="card-footer"> 			<button type="button" class="btn btn-primary submit" id="apply-filters"><i class="fa fa-check" style="opacity: 0.6; margin: 0 4px 0 0;"></i> Применить фильтр</button> 		</div> 	</div> 	<div class="advanced-filter-alm"> 		<div class="card-columns"> 			[ajax_load_more post_type="post" posts_per_page="6" label="Загрузка записей"] 		</div> 	</div> </div>

Кстати, если вставлять код в редактор WordPress, желательно предварительно его минифицировать. Чтобы редактор не вставил лишние теги параграфа и переноса строк.

Категории я выровнял в три колонки с помощью свойства flexbox.

ul.advanced-filter-menu {  display: flex;  flex-wrap: wrap; } ul.advanced-filter-menu li {  flex-grow: 1;  width: 33%; } 

Вот и всё. Конечно, дизайн не фонтан. Но мы уже получили плавную прокрутку и создали простую фильтрацию по категориям.

Надеюсь, в будущем мне удастся посмотреть и другие возможности данного плагина.

wp-best.ru

Синтаксиси метода jQuery.load().

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

где

  • url — строка, содержит URL запроса, для отправки данных.
  • data — строка или Plain-объект (ассоциативный массив), данных для отправки на сервер.
  • complete(data, textStatus, jqXHR) — функция обратного вызова, вызывается когда запрос выполнен.

Примечание: При обработке собыйти также есть метод .load(). jQuery определяет разницу в зависимости от набора аргументов.

Метод jQuery.load() является самым простым способом получения данных с сервера. Метод jQuery.load() эквивалентен методу jQuery.get(url, data, success) кроме того, что это метод, а не глобальная функция и имеет не явную функцию обратного вызова. после успешного ответа (т.е. когда  textStatus равен «success» или «notmodified») метод jQuery.load() вставляет полученный HTML-код в указанные элементы. Это означает, что в большинстве случаев применение метода может быть довольно простым:

$('#result').load('ajax/test.html');

Если элементы указанные в селекторе не найдены на странице (в примере выше это элемент с id=»result»), то запрос не будет отправлен.

Функция обратного вызова

Если обратный вызов «complete» определен, то он выполняется после пост-обработки и после вставки HTML-кода. Complete вызывается один раз для каждого элемента в коллекции jQuery и this устанавливается в соответсвии с очередным DOM-элементом.

$('#result').load('ajax/test.html', function() {      alert('Load was performed.');  });

Получение части страницы

Метод jQuery.load() в отличие от jQuery.get(), позволяет указать какую часть получаемого HTML-документа следует вставить в текущую страницу. Это достигается с помощью специального синтаксиса  для параметра URL. Если в строку вклюячены один или несклько пробелов, то  значение после первого пробела рассматривается jQuery как селектор который указывает на содержание из получаемого HTML-документа.

Мы можем изменить приведенный выше пример, чтобы использовать только часть HTML-документа:

jQuery('#result').load('ajax/test.html #container');

При получении содержимого HTML-страницы ajax/test.html jQuery анализирует код, чтобы найти элемент с id=»contaner». Этот элемент вместе с его содержимым вставляется в элемент с id=»result» текщей страницы, а остальные данные игнорируются.

jQuery использует свойство браузеров innerHTML для разбора полученного документа и вставки его в текущий документ. Во время этого процесса, браузеры часто фильтруют некоторые элементы документа, такие как <html>, <title> и <head>. В результате, элементы извлекаемые jQuery.load() не могут быть точно такими же, как если бы указанная страница была получена непосредственно в браузере.

Выполенение скриптов.

При вызове метода jQuery.load() используя URL без суфикса выражение селктора, содержимое передается в метод jQuery.html() до удаления скриптов. Он выполняет блоки скриптов, до их отключения. Если метод jQuery.load() вызывается с селектором добавленным в URL, то скрипты вырезаются до обновления DOM и следовательно не выполняются. Примеры обоих случаев смотрите ниже:

В этом примере скрипты будут загружены в элемент с id=»a» и как часть документа будет выполнен.

jQuery('#a').load('article.html');

Тем не менее в следующем примере блоки скриптов загружаемые в элемент с id=»b» удаляются, и не выполняются.

jQuery('#b').load('article.html #target');

Дополнительное примечание.

  • Из-за ограничений безопасности браузеров, большинство AJAX-запросов ограничены той же политикой безопасности. AJAX-запросы не могут успешно извлекать информацию из других доменов, поддоменов или протоколов.

Примеры

Пример: Загрузка подножия главной страницы в список.

<!DOCTYPE html>  <html>      <head>          <style>              body{ font-size: 12px; font-family: Arial; }          </style>          <script src="http://code.jquery.com/jquery-1.9.1.js"></script>      </head>      <body>          <b>Footer navigation:</b>          <ol id="new-nav"></ol>          <script>              $("#new-nav").load("/ #jq-footerNavigation li");          </script>      </body>  </html>

Пример: Отобразить сообщение об ошибке, если при Ajax-запросе возникла ошибка.

<!DOCTYPE html>  <html>      <head>          <style>              body{ font-size: 12px; font-family: Arial; }          </style>          <script src="http://code.jquery.com/jquery-1.9.1.js"></script>      </head>      <body>          <b>Successful Response (should be blank):</b>          <div id="success"></div>          <b>Error Response:</b>          <div id="error"></div>          <script>              $("#success").load("/not-here.php", function(response, status, xhr) {                  if (status == "error") {                      var msg = "Sorry but there was an error: ";                      $("#error").html(msg + xhr.status + " " + xhr.statusText);                  }              });          </script>      </body>  </html>

Пример: Загружаем файл feeds.html в div с id=»feeds».

$("#feeds").load("feeds.html");

Пример: Передача данных в видже массива на сервер.

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

Пример: Передача данных в видже массива на сервер, с добавлением обработчика завершения запроса.

$("#feeds").load("feeds.php", {limit: 25}, function(){      alert("The last 25 entries in the feed have been loaded");  });

 

ramech.net

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data. This means that most uses of the method can be quite simple:

If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent.

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

In the two examples above, if the current document does not contain an element with an ID of "result," the .load() method is not executed.

Request Method

The POST method is used if data is provided as an object; otherwise, GET is assumed.

Loading Page Fragments

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute.

However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:

api.jquery.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.