13.12.2024

Usando o Método POST em vez de GET em Hiperlinks

Resposta Rápida

Está tendo dificuldade para imaginar como hiperlinks podem iniciar requisições POST? Use um formulário oculto e JavaScript para conseguir isso. Veja o exemplo abaixo:

<form action="/meu-endpoint" method="post" id="chaveSecreta" style="display: none;">
    <input type="hidden" name="chave1" value="valor1"/>
</form>
<a href="#" onclick="document.getElementById('chaveSecreta').submit();">Link para enviar uma requisição POST</a>

Como em uma mágica, um clique no link enviará uma requisição POST para a URL /meu-endpoint com os dados chave1=valor1, que permanece oculto.

Usando um Contorno com JavaScript

É melhor encapsular essas tarefas em funções para tornar o código mais elegante. Veja como o JavaScript transforma formulários padrão em fontes para criar requisições POST:

function postLink(url, data) {
    const formElement = document.createElement('form');
    formElement.method = 'post';
    formElement.action = url;

    Object.keys(data).forEach(key => {
        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = key;
        hiddenInput.value = data[key];
        formElement.appendChild(hiddenInput);
    });

    document.body.appendChild(formElement);
    formElement.submit();
}

Agora, para enviar uma requisição, você simplesmente chama postLink('endpoint', { minhaChave: 'meuValor' }).

Combinando com CSS

Você pode estilizar um elemento para parecer um hiperlink tradicional usando CSS:

.post-as-link {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

Aplique esta classe ao elemento que deve aparecer como um hiperlink.

Visualização (com Emojis)

A transformação de uma requisição GET em POST pode ser representada pela seguinte metáfora visual:

GET : 🐦 Tuitar publicamente uma mensagem.
POST : 📨 Enviar uma mensagem direta aos amigos de forma privada.

Exemplo usando uma requisição GET:

Old-GET: 😃📢 Solicitação pública "Me traga um livro sobre Harry Potter 📘"

E aqui está como seria com uma requisição POST:

<form action="/bibliotecário" method="post">
    <input type="hidden" name="livro" value="📘">
    <a href="#" onclick="this.closest('form').submit();return false;">Pedir livro</a>
</form>

Nos bastidores, a requisição POST se parece com isso:

New-POST: 😃📨 Envia secretamente uma nota '📘' ao bibliotecário.

Tudo feito de forma discreta e sutil! 🕵️‍♀️🔐

jQuery Adiciona Comodidade

Se você prefere trabalhar com jQuery, pode enviar o formulário utilizando-o:

$('a#meuLinkId').click(function(e) {
    e.preventDefault();
    $.post('/meu-endpoint', { chave1: 'valor1' }, function(resposta) {
        // Manipulação profissional da resposta
    });
});

Agora, ao clicar no link, será iniciada uma requisição POST usando $.post().

Abrindo a Resposta em uma Nova Aba

Quer que o resultado da requisição POST abra em uma nova aba? O atributo target="_blank" permite fazer isso:

<form action="/meu-endpoint" method="post" target="_blank">
    <input type="hidden" name="chave1" value="valor1"/>
</form>
<a href="#" onclick="this.previousElementSibling.submit();return false;">Abrir em uma nova aba!</a>

Clicando no link, o resultado da requisição será aberto em uma nova janela do navegador.

Voltando ao Lado do Servidor

É importante garantir que os manipuladores de requisição no servidor estejam configurados para aceitar requisições POST. Eles também devem ler corretamente os dados do corpo da requisição em vez da URL.

Passo a Passo com XMLHttpRequest

Para ter controle total sobre o processo de envio do formulário, você pode usar XMLHttpRequest:

let xhr = new XMLHttpRequest();
xhr.open('POST', '/meu-endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Tarefa concluída!
    }
};
xhr.send('chave1=valor1');

Aviso Importante

Apesar do fato de que os dados em requisições POST não aparecem na URL, isso não garante completa confidencialidade. Sempre valide e sanitize os dados do formulário no servidor.

Recursos Úteis

1. Formulários HTML com Método POST - MDN Web Docs
2. O Processo de Envio e Recuperação de Dados de Formulários - MDN
3. Usando a Fetch API para Enviar Requisições HTTP - MDN
4. Requisições POST Assíncronas com AJAX
5. Método HTTP POST e Outros Métodos - MDN

Conclusão

Em conclusão, dominar essa habilidade prática permitirá que você se integre à comunidade de desenvolvedores profissionais, tornando-se verdadeiros carteiros no mundo das tecnologias web!

Se você gostou deste artigo, não esqueça de nos apoiar com um like. Feliz POSTagem!👨‍💻

Video

Navigation