-1

Olá, tenho um códico Ajax que não entendo oq está acontecendo se alguém puder ajudar ... Não estou entendendo em xhr.open(method, url); que URL ele define? Eu tenho este códico e está funcionando mas eu copiei quero mudar algumas coisas é impressão minha ou está null? Pq está funcionando então não pode ser null né? E se não for null que URL ele está setando pq não era pra assim por exemplo xhr.open(method, 'qualquercoisa.php') ou algo do tipo?

window.addEventListener("DOMContentLoaded", function() {

    // get the form elements defined in your form HTML above

    var form = document.getElementById("form");
    var button = document.getElementById("rodar");

    // Success and Error functions for after the form is submitted

function success() { }

function error() { }

    // handle the form submission event

    form.addEventListener("submit", function(ev) {
      ev.preventDefault();
      var data = new FormData(form);
      ajax(form.method, form.action, data, success, error);
    });
  });

  // helper function for sending an AJAX request

  function ajax(method, url, data, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        success(xhr.response, xhr.responseType);
      } else {
        error(xhr.status, xhr.response, xhr.responseType);
      }
    };
    xhr.send(data);
  }

1 Resposta 1

1

primeiramente, benvindo ao StackOverflow :)

O código é simples de notar ...

dentro de uma funcao anonima do addEventListener tens 3 funcoes:

  • success
  • error
  • ajax

as duas primeiras nao fazem nada, sao apenas "placeholders", mas são chamadas pela funcao ajax() correctamente...

existe um segundo EventListener que faz o bind do submit de uma form e é esse que chama o ajax, com

ajax(form.method, form.action, data, success, error);

form.method é o que representa normalmente o method de uma <form> form.action é o que representa normalmente o action de uma <form>

ou seja, augures no sódigo existe algo como:

var form = document.getElementById("o-meu-formulario");

e no HTML tem algo como:

<form action="/pagina.php" method="get" class="form-example">
    ...
    <button type="submit">Submeter o formulário</button>
</form>

assim sendo, o código está apenas a ir buscar os valores do formulário no HTML...

para ver melhor, podes abrir a consola, e vai a "NETWORK", submete o furmulário e a chamada ajax aparecerá aí, se quiser apenas ver pelo código, mude por exemplo

function success() {
    console.log('SUCESSO!');
}

function error(err) { 
    console.log('ERRO!', err);
}

assim no console (F12 no browser) pode ver o output da funcao...


imagem no comentário:

6
  • Mas qual a URL que ele passa em xhr.open(method, url) porque não era pra ser 'qualquercoisa.php' ou algo do tipo? Porque ao invés disso ele só passou url não consegui entender isso
    – Dakota
    Commented 30/11/2019 às 22:48
  • @Dakota acabei de explicar, é o que estiver no html dentro da tag <form> como action, no meu exemplo diz /pagina-php... o form.action vai buscar o valor de lá... vê aqui, talvez entendas melhor: i.imgur.com/RqcvZnO.png
    – balexandre
    Commented 30/11/2019 às 22:50
  • Dentro da tag action tem isso formspree.io/xdokagnl é pra envio de email sabe? Ele tá enviando o e-mail, só quero saber porque quando eu clico no botão ele envia o e-mail normal só que não abre nada ele envia mais não abre, me explica melhor isso por favor
    – Dakota
    Commented 30/11/2019 às 22:55
  • se for a formspree.io isso é um servico que cria formularios... voce está enviando todos os dados que inserir para esse servico... o que faz esse servico propriamente, nao posso dizer, mas ve mais informacao no side deles...
    – balexandre
    Commented 30/11/2019 às 23:03
  • Ok, vlw uso Stack overflow a pouco tempo sabe como marco a pergunta como resolvido pq não achei não kkk
    – Dakota
    Commented 30/11/2019 às 23:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .