Отправка формы без перезагрузки страницы: решение PHP

Быстрый ответ

Для отправки формы без перезагрузки страницы рекомендуется использовать AJAX и функцию fetch():

document.querySelector('form').onsubmit = async e => {
    e.preventDefault();
    let response = await fetch('submit.php', {
        method: 'POST',
        body: new FormData(e.target) 
    });
    let result = await response.text();
    console.log(result);
};

Замените 'submit.php' на адрес вашего серверного скрипта. Данные будут отправлены асинхронно без перезагрузки страницы.

Неприметная работа с Iframes

Если в вашей среде исполнения не поддерживается AJAX, вы можете использовать iframe, работая с ним незаметно:

• Создайте iframe, присвойте ему имя и скройте с помощью CSS-свойства display:none.
• Укажите в атрибуте target формы имя созданного iframe, чтобы он получал ответ сервера.
• Атрибут action укажите на ваш PHP-скрипт, который обработает данные.
• Установите метод отправки данных как POST: это обеспечит безопасность и эффективность.

<iframe name="hidden_frame" id="hidden_frame" style="display: none;"></iframe>
<form action="submit.php" method="post" target="hidden_frame">
    <!-- Поля формы – это задачи для нашего скрытого агента -->
</form>

Постраничная навигация без AJAX

API FormData превосходно справляется с задачами, где AJAX не применим. Это современное решение для работы в браузерах:

let formData = new FormData(document.querySelector('form'));
// Здесь можно добавить дополнительный JavaScript для обработки отправки данных

Обработка ответов: JavaScript-подход

Нет большей радости, чем успешно полученный ответ. И вот как обрабатывает эту радость JavaScript:

function notify(message) {
    console.log(message);
}

Вы можете использовать эту функцию в связке с iframe:

document.getElementById('hidden_frame').onload = function() {
    notify('Форма успешно отправлена!');
};

Взаимозаменяемость: распознавайте ключевых действующих лиц

• Использование iframe – это простой подход без прямого взаимодействия клиента с сервером.
• Сочетание fetch() и FormData позволяет гибко обрабатывать multipart-данные форм.
• Не забывайте о безопасности при разработке серверных скриптов (submit.php).

Визуализация

Отправка формы может быть спокойной как морская гладь:

Веб-форма (📬) -> AJAX-запрос (🏃‍♂️) -> Сервер (🏠)

AJAX-бегун аккуратно передает данные, волны перезагрузок не тревожат пользователя:

$('form').on('submit', function(e) {
    e.preventDefault();
    $.ajax({});
});

Все остается в спокойствии, жизнь на веб-странице продолжается неизменно. Море штиль! 🚫🔔

Оптимизация и полезные рекомендации

Управление успехом и обработка ошибок

Грамотно обработанные ошибки помогают поддерживать баланс:

fetch('submit.php', {
    method: 'POST',
    body: new FormData(document.querySelector('form'))
}).then(response => {
    if (!response.ok) {
        throw new Error('В ответе сервера обнаружен неожиданный элемент');
    }
    return response.text();
}).then(text => {
    console.log('Форма успешно достигла своей цели:', text);
}).catch(error => {
    console.error('В процессе отправки обнаружена ошибка:', error);
});

Подробнее об этом расскажет наш спикер на видео

Производительность и кэширование

AJAX позволяет отключить кэширование, чтобы каждое обращение к серверу было актуальным:

$.ajax({
    url: 'submit.php',
    type: 'POST',
    data: new FormData($('form')[0]),
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
        console.log(data);
    }
});

Освобождение ресурсов после окончания действий

После работы с iframe обязательно освободите занимаемые ресурсы:

let iframe = document.getElementById('hidden_frame');
iframe.onload = function() {
    iframe.parentNode.removeChild(iframe);
};

Полезные материалы

1. jQuery.ajax() | jQuery API Documentation – Описание методов AJAX в jQuery.
2. Fetch API – Web APIs | MDN – Подробная информация о Fetch API для сетевых запросов.
3. GitHub – axios/axios: Promise based HTTP client for the browser and node.js – Axios, мощный HTTP-клиент на основе промисов.
4. Serialize form data into a query string – Сериализация данных формы для AJAX-запросов.
5. XMLHttpRequest – Web APIs | MDN – XMLHttpRequest для асинхронных запросов.
6. jQuery AJAX get() and post() Methods – Инструкция по методам get() и post() в jQuery.
7. FormData – Web APIs | MDN – API FormData для работы с данными форм.