Содержание:
Cокращённые Ajax методы jQuery
В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.
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;
$.get({})я используюpData = JSON.stringify(pData); $.ajax({type: "POST", url: "CategoryController.php/?controller=category&action=onloadView", data: {param: pData}, dataType: "json", success: function(data){....} });, а также не использую ЧПУ, у меня другие url Звучит конечно глупо, но мне не до конца понятно, что делает эта строка:var xhrTpl = $.get({url: 'page.tpl'})в созданную переменную что записывается и где эту переменную использовать в дальнейшем. Я как понимаю она обращается к page.tpl файлу, но как вызвать мне .tpl файл в моем случае?Текущие шаблон- заготовки нужны чтобы не дублировать в каждой js-функции нужный подгружаемый кусок кода.
Я конечно использую другой вариант: это в success обращаюсь по id к скрипту, а точнее к После уже данные обрабатываются и возвращаются обратно в js, далее вывожу на страницу в блок с заданным id.
Подскажите, как более правильно, оптимально и грамотно подойти к решению данной задачи?
Можно, например, выполнить так:
1. Шаблон (page.tpl):
2. PHP-сценарий, возвращающий некоторые данные в формате JSON:
<?php header('Content-Type: application/json'); $arr['%h1content%']='Текст заголовка'; $arr['%pcontent%']='Текст параграфа'; echo json_encode($arr);3. HTML-страница (JavaScript сценарий):var xhrTpl = $.get({url: 'page.tpl'}) .done(function(html) { var result = html; // получаем шаблон var xhrJSON = $.get({url: 'data.php'}) .done(function(arr) { for (var key in arr) { // перебираем полученный массив result = result.replace(key, arr[key]); // заменяем %...% на значение } $('body').append(result); // определяем место, в которое необходимо вставить результат (например, в конец body) }); });а следом .done добавляет обработчик при успешном выполнении запроса.
В данной ситуации лучше использовать get, а не post?
success: function(data){ for(var i = 0; i < data.result.myArr.length; i++){прокручиваю массив чтобы при каждой итерации обращаться по нужному ключу к присвоенному массиву уже с нужными данными.Далее использую
var xhrTpl = $.get({url: 'localhost/view/'+data.result.myArr[i].include_file}) // include_file - имя файла .tpl .done(function(html) { var results = html; }) var arr = data.result.myArr[i]; for (var key in arr) { // перебираем полученный массив results = results.replace(key, arr[key]); } ('#listForm').append(results);Я в.done(function(html) {не могу обратиться к data.result?Дело в том что, мне приходится получить в первую очередь пакет данных от сервера, а потом в цикле подставить в путь
var xhrTpl = $.get({url:имя вызываемого файла которое хранится в массиве приходящем от сервера.И обязательно добавлять знак-% в ключи приходящие с сервера? Без них ключи не отработают на странице и значение ключей нормально не вывести?
Как правильно можно сделать в данной ситуации?
Знак процента добавлять в начало и конец не обязательно, можете придумать свои плейсхолдеры.