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.

enviar postagem do formulário em javascript

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 método 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.

enviar postagem do formulário em javascript - resultado

O código acima funciona da mesma maneira que o código anterior, mas é muito mais conciso e legível.