13.12.2024

Utilizando os Métodos PUT e DELETE em Formulários: Benefícios

Visão Rápida

Os formulários HTML originalmente suportam apenas os métodos GET e POST. No entanto, é totalmente possível simular requisições PUT e DELETE usando JavaScript, interceptando o evento de envio do formulário e executando uma requisição AJAX. Além disso, pode-se utilizar um campo de entrada oculto no formulário que o servidor interpreta como uma indicação do método HTTP desejado.

Aqui está um exemplo de uma requisição AJAX usando o método DELETE:

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault(); // Interrompe a ação padrão do formulário
  fetch('/recurso', { method: 'DELETE' }) // "Você não passará!" - o grande Gandalf
    .then(res => res.json()) // Lida com a resposta de sucesso
    .catch(err => console.error(err)); // Registra informações de erro no console
});

Veja como uma requisição PUT simulada pode ser estruturada usando um campo de entrada oculto no formulário:

<form method="POST" action="/atualizar-recurso">
  <input type="hidden" name="_method" value="PUT">
  <!-- outros campos do formulário vão aqui... -->
</form>

Nesse caso, o servidor deve processar o valor de _method para realmente aplicar o método HTTP.

Quando Usar PUT e DELETE?

PUT e DELETE são elementos cruciais da arquitetura RESTful, embora não sejam diretamente suportados por formulários HTML. O uso correto desses métodos, especialmente em conjunto com AJAX, pode aprimorar a funcionalidade e a usabilidade da sua aplicação web:

• PUT é utilizado para atualizar dados de recursos.
• DELETE é usado para remover recursos.

Ambos os métodos presumem o mesmo resultado para requisições subsequentes, o que é relevante em casos de conexões de rede instáveis.

Middleware e Configurações do Servidor

Middleware do servidor, como o módulo method-override para Express.js ou funções integradas no Ruby on Rails, podem contornar as limitações do uso dos métodos PUT e DELETE em formulários HTML ao interpretar corretamente o campo _method. No entanto, antes de implementá-los, assegure-se de que seu servidor está configurado para aceitar esses métodos; caso contrário, ele pode não processar a requisição.

Visualização

Vamos deixar de lado analogias complicadas:

A operação de um formulário HTML envolve duas ações:

• GET para recuperar dados.
• POST para adicionar novos dados.

Agora, para atualizar ou deletar dados — PUT e DELETE, respectivamente — é necessário um pouco de "mágica" adicional.

Mantenha Seu Código Atualizado

As especificações HTML estão continuamente sendo atualizadas. Enquanto PUT e DELETE atualmente não estão disponíveis diretamente, é essencial ficar atento às mudanças mais recentes na especificação HTML5.

Bibliotecas como jQuery simplificam o trabalho com AJAX. Se você busca precisão, confira a documentação oficial do jQuery.ajax().

Utilizar PUT e DELETE enriquece os princípios REST, acrescenta completude semântica à aplicação e facilita sua manutenção.

Equilibrando a Praticidade

Escolher entre PUT/DELETE e métodos mais tradicionais é uma questão de compromisso. Eles permitem que sua aplicação siga os princípios da arquitetura RESTful, mas você também deve considerar fatores como compatibilidade com navegadores e complexidade de implementação.

Benefícios:

• Clareza nas operações e facilidade de identificação.
• Simplicidade na depuração e atualização do código.
• Adesão aos princípios da arquitetura RESTful.

Compromissos:

• Suporte limitado para os métodos GET e POST.
• AJAX requer código JavaScript adicional.
• O servidor pode necessitar de configuração extra.

Para melhorar a experiência do usuário, recomenda-se considerar aspectos como redirecionamento após requisições AJAX, tratamento de erros e fornecimento de alternativas para usuários sem suporte a JavaScript.

Recursos Úteis

1. Formulários Web – Trabalhando com Dados do Usuário
2. Diferenças entre PUT e POST em REST API
3. Usando a Fetch API
4. Validação de Formulários no Lado do Cliente
5. Métodos HTTP para Serviços RESTful
6. Padrão HTML

Video

Navigation