Вы устали от веб-форм, вызывающих перезагрузку страницы каждый раз, когда пользователи отправляют данные? Хотите обеспечить плавный и динамичный пользовательский интерфейс без раздражающих обновлений? Что ж, вам повезло! В этом сообщении блога мы рассмотрим различные способы отправки формы и отображения результатов на одной странице без обновления всей страницы. Звучит захватывающе, правда? Давайте погрузимся!

1. Подход XMLHttpRequest (XHR):
   Объект XMLHttpRequest позволяет отправлять данные на сервер и получать ответ без перезагрузки страницы. Используя JavaScript, вы можете собирать данные формы, отправлять их на сервер с помощью XHR и динамически обновлять страницу возвращаемыми результатами. Вот упрощенный фрагмент кода:

   const form = document.getElementById('myForm');
   form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent default form submission
    const formData = new FormData(form);
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/your-server-endpoint', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        // Update the page with the returned results
        const response = JSON.parse(xhr.responseText);
        // Manipulate the DOM to display the results
      }
    };
    xhr.send(formData);
   });

2. Fetch API.
   Fetch API представляет собой современную альтернативу XHR для выполнения асинхронных запросов. Он предлагает более простой и гибкий синтаксис. Вот пример отправки формы с помощью Fetch:

   const form = document.getElementById('myForm');
   form.addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(form);
    fetch('/your-server-endpoint', {
      method: 'POST',
      body: formData
    })
      .then(response => response.json())
      .then(data => {
        // Update the page with the returned results
        // Manipulate the DOM to display the results
      });
   });

3. jQuery AJAX:
   Если вы используете jQuery в своем проекте, метод AJAX предоставляет простой способ отправки форм и обработки ответов без обновления страницы. Вот пример:

   $('#myForm').submit(function(event) {
    event.preventDefault();
    const formData = $(this).serialize();
    $.ajax({
      url: '/your-server-endpoint',
      type: 'POST',
      data: formData,
      success: function(response) {
        // Update the page with the returned results
        // Manipulate the DOM to display the results
      }
    });
   });

4. Библиотека Axios.
   Axios – это популярная библиотека JavaScript для выполнения HTTP-запросов. Он работает как в браузере, так и в среде Node.js. Вот пример использования Axios для отправки формы:

   const form = document.getElementById('myForm');
   form.addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(form);
    axios.post('/your-server-endpoint', formData)
      .then(response => {
        // Update the page with the returned results
        // Manipulate the DOM to display the results
      });
   });

Это всего лишь несколько способов добиться отправки формы и отображения результатов без обновления страницы. У каждого подхода есть свои преимущества, поэтому выберите тот, который лучше всего подходит для вашего проекта. Попрощайтесь с неуклюжим обновлением страниц и наслаждайтесь комфортным пользовательским интерфейсом, о котором вы всегда мечтали!

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