Enviar formulário com solicitação POST em JavaScript
Em JavaScript, você pode executar uma solicitação POST com os formulários HTML. A postagem é um método usado em formulários HTML para enviar ou enviar os dados ao servidor.
Envie um formulário com uma solicitação POST em JavaScript
O código a seguir mostra como usar o JavaScript para enviar um formulário em uma solicitação POST. Aqui, criaremos uma nova solicitação de postagem e enviaremos o usuário para a nova URL myPath.
Primeiro, criamos uma função que leva três caminhos de argumentos (a URL ou ponto de extremidade), parâmetros (um objeto com par de valores-chave) e o último é o método post que estamos inicializando diretamente no momento da função criação.
Então, usando o método document.createElement(), iremos criar um elemento de formulário e armazená-lo dentro da variável form. Em seguida, inicializaremos este form.method com o método post e depois form.action com o caminho. No final, vamos anexar o formulário que criamos à tag body presente dentro do DOM.
function sendData(path, parameters, method = 'post') {
const form = document.createElement('form');
form.method = method;
form.action = path;
document.body.appendChild(form);
for (const key in parameters) {
const formField = document.createElement('input');
formField.type = 'hidden';
formField.name = key;
formField.value = parameters[key];
form.appendChild(formField);
}
form.submit();
}
sendData('/myPath/', {query: 'hello world', num: '1'});
Neste ponto, criamos e anexamos o formulário ao elemento do corpo e, atualmente, o formulário não contém nenhum elemento dentro dele. Assim, para adicionar os dados dentro do formulário, usaremos o objeto parâmetros, que estamos passando para nossa função sendData(). Para iterar sobre este objeto, usaremos um loop for e pegaremos cada chave do objeto.
Então, vamos criar um campo de formulário input e armazená-lo dentro da variável formField. Agora vamos definir seu tipo para hidden, pois não queremos mostrar este formulário dentro de nossa página web. Por fim, inicializaremos os parâmetros name e valor dos campos do formulário com a chave e valor do objeto parâmetros.
Já que, em nosso caso, estamos passando um objeto que contém dois pares de valores-chave; portanto, o loop for será por duas vezes. Depois disso, usaremos o método submit() para executar a solicitação de postagem e enviar o usuário para um endpoint ou URL diferente, por exemplo, myPath. A função sendData() é chamada passando estes parâmetros sendData('/myPath/', {query: 'hello world', num: '1'});.
Se você executar o código acima, ele fará uma solicitação POST e o levará a um novo endpoint, conforme mostrado abaixo.
Uma maneira alternativa de fazer isso é criar o formulário inteiro dentro do próprio HTML em vez de JavaScript. E então acessar este formulário e seus elementos dentro de nosso código JavaScript da seguinte maneira.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form" action="https://www.wikipedia.org/" method="POST">
<input id="formField" type="hidden" name="Director" value="James Cameron">
</form>
<script src="./script.js"></script>
</body>
</html>
function postData(path, name, value) {
document.getElementById('formField').name = name;
document.getElementById('formField').value = value;
document.getElementById('form').action = path;
document.getElementById('form').submit();
}
postData('https://www.wikipedia.org/', 'Writer', 'Jim Collins');
Aqui, estamos adicionando diretamente o method como POST ao próprio formulário HTML. Dentro de nosso método postData(), estamos apenas passando o caminho, name e valor como postData("https://www.google.com/","Writer","Jim Collins");. Em seguida, acessaremos o formField usando o método document.getElementById() e definiremos os valores apropriadamente como mostrado acima. Depois de executar este código, ele executará uma solicitação POST e levará o usuário ao site da Wikipedia, conforme mostrado abaixo.
O código acima funciona da mesma maneira que o código anterior, mas é muito mais conciso e legível.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn