В этой статье я расскажу вам о get и post-запросах, также покажу на практике их применение на примере системы uCoz.
Теория большого взрыва
GET-запросы - запрос на подгрузку определенных данных с одной страницы на другую. Полезная функция, если необходимо загрузить что-то с другой страницы, не открывая ее полностью, дабы сэкономить трафик пользователей с малой скоростью интернета.
POST-запрос - прямая параллельность GET-запроса. Там мы подгружали содержимое, тут мы его, наоборот, отправляем. Также экономит трафик пользователей.
Чаще всего используется комбинация GET и POST-запроса, например, подгрузка формы добавления материала на страницу с последующей отправкой данных из этой формы.
Применение
GET-запросы:
Создаем на странице div с id, например, first. В него мы будем подгружать данные:
Затем на второй странице создадим div с id second.
Code
<div id="second">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue.</div>
Теперь "гетим". На первую страницу вставляем скрипт:
Code
<script type="text/javascript">
$.get('/адрес_страницы', function(data){
$('#ИД_1').html($('#ИД_2', data).html());
})</script>
Готовый код будет выглядеть так:
Code
<script type="text/javascript">
$.get('/index/0-2', function(data){
$('#first').html($('#second', data).html());
})</script>
Теперь заходим на первую страницу и видим там текст:
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue.
POST-запросы:
Работу POST-запросов я покажу вам на примере системы uCoz.
Допустим, нам нужно добавить материал в модуль "Новости сайта".
Открываем страницу добавления новости, смотрим исходный код. Находим там все текстовые поля и смотрим их атрибут name.
У меня их оказалось всего 2: title (Название материала) и message (Сообщение).
Также ищем все теги с type="hidden". Они обычно находятся в конце и в начале формы добавления, мы их не видим, но они есть.
Их 5: name="a" с value="2"; name="ssid" с меняющимся value; name="numi" с value="1" (Необязательно); name="jkd498" и name="jkd428" с value="1".
Итак, создаем на странице форму:
Code
<input type="text" id="title" style="width:100%;" placeholder="Название материала...">
<input type="text" id="message" style="width:100%;" placeholder="Текст материала...">
<input type="button" onclick="postThis();" value="Отправить">
<script type="text/javascript">
function postThis(){
$.get('/news/0-0-0-0-1', function(data){ // GET-запрос к странице добавления
$.post('/news/', { // Начинаем POST-запрос
title: $('#title').val(), // title - атрибут name на странице добавления. #title - ID текстового поля, которое нужно добавить
message: $('#message').val(), // То же самое, только с message.
a:2, jkd498:1, jkd428:1, // Системные переменные, которые мы нашли на странице добавления (type="hidden" на странице добавления).
ssid: $('[name="ssid"]', data).val() // Системная динамическая переменная, значение ее гетим со страницы добавления
}, function(){alert('Выполнено!');}) // Уведомление об успешном добавлении
})
}
</script>
Теперь пробуем заполнить нашу форму добавления. Заполняем все поля. Я написал в первом поле "Тест", во втором "Проверка". Нажимаем кнопку добавления. Если все правильно, мы увидим на странице /news/ добавленный материал с названием "Тест" и сообщением "Проверка".