3
respostas

Envio de dados do form

Bom dia!

Como fazer o envio dos dados recebidos através do evento do form de outra maneira (melhor prática) que não seja utilizando o $.ajax? Não gostaria de usar o jQuery!

3 respostas

Oi Gustavo, tudo bom?

Você pode fazer isso usando o fetch e especificando os headers. Algo como:

var formData  = new FormData();

    formData.append("nome", "andré chaves");
    formData.append("email", "andre@chaves.com");
// outros dados
  fetch("suaUrl", {
    method: 'POST',
    body: formData
  }).then(function (response) {
     // resultado da promisse =)
  });

Abraço

Bom dia, André.

Não consegui implementar no projeto do curso usando o fetch, estou fazendo assim:

enviaForm(evento){
  evento.preventDefault();

  const url = 'http://cdc-react.herokuapp.com/api/autores';

  fetch(url, {
    method: 'post',
    body: JSON.stringify({nome:this.state.nome,email:this.state.email,senha:this.state.senha}),
    success: function(resposta){
      console.log("enviado com sucesso");
    }.bind(this),
    error: function(resposta){
      console.log("erro");
    }       
  });
}

Pode ajudar?

Opa, tenta algo como:

const url = 'http://cdc-react.herokuapp.com/api/autores';

const dadosDoForm = {nome:this.state.nome,email:this.state.email,senha:this.state.senha};

fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new FormData(dadosDoForm),
    success: function(resposta){
      console.log("enviado com sucesso");
    }.bind(this),
    error: function(resposta){
      console.log("erro");
    }       
})

Aqui a gente ta especificando o tipo do conteudo da requisição no header, além desse tipo você pode definir muitos outros. Aqui você encontra uma lista completa =)

Se rolar algum erro, compartilha com a gente aqui que fica mais facil de encontrar possiveis problemas!

Abraço