Отправка данных формы в запросах PATCH или PUT: методы и примеры кода

При работе с веб-приложениями существующие ресурсы на сервере обычно обновляются с помощью запросов PATCH или PUT. Эти запросы позволяют изменять отдельные поля ресурса или заменять весь ресурс соответственно. В этой статье мы рассмотрим различные методы отправки данных формы в запросах PATCH или PUT, а также приведем примеры кода.

Метод 1: параметры URL

Один из способов отправки данных формы в запросе PATCH или PUT — добавление полей формы в качестве параметров URL. Вот пример использования Fetch API JavaScript:

const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', 'johndoe@example.com');
fetch('https://api.example.com/resource?id=123', {
  method: 'PATCH',
  body: formData
})
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

В этом примере поля формы «имя» и «электронная почта» добавляются к объекту FormData, а затем отправляются в качестве тела запроса в запросе PATCH на URL-адрес 4.

Метод 2: тело запроса (JSON)

Другой подход — отправить данные формы в виде объекта JSON в теле запроса. Вот пример использования JavaScript:

const formData = {
  name: 'John Doe',
  email: 'johndoe@example.com'
};
fetch('https://api.example.com/resource/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

В этом примере данные формы сериализуются как объект JSON и отправляются в качестве тела запроса в запросе PUT. Заголовку Content-Typeприсвоено значение application/json, что указывает на формат JSON.

Метод 3: Объект FormData

Если вы работаете напрямую с HTML-формами, вы можете использовать объект FormData. Вот пример использования HTML-формы и JavaScript:

<form id="myForm">
  <input type="text" name="name" value="John Doe">
  <input type="email" name="email" value="johndoe@example.com">
  <button type="button" onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm() {
  const form = document.getElementById('myForm');
  const formData = new FormData(form);
  fetch('https://api.example.com/resource/123', {
    method: 'PATCH',
    body: formData
  })
    .then(response => {
      // Handle the response
    })
    .catch(error => {
      // Handle errors
    });
}
</script>

В этом примере поля формы автоматически собираются с помощью конструктора FormData, а данные формы отправляются как тело запроса в запросе PATCH.

В этой статье мы рассмотрели различные методы отправки данных формы в запросах PATCH или PUT. Вы можете выбрать метод, который лучше всего соответствует вашим требованиям и среде программирования. Независимо от того, добавляете ли вы поля формы в качестве параметров URL-адреса, отправляете объект JSON в тело запроса или используете объект FormData, эти методы обеспечивают гибкость и простоту использования при обновлении ресурсов на сервере.

Не забудьте обрабатывать обработку на стороне сервера соответствующим образом в зависимости от выбранного метода. Приятного кодирования!