Início / coding / Perguntas / 78354018
Accepted
danday74
Asked: 2024-04-19 21:29:49 +0800 CST

Como posso ouvir a conclusão da solicitação HTTP da ação do formulário? [duplicado]

  • 772

Eu tenho este formulário:

<form id="my-form" action="/my-url" method="GET">
  <button type="submit">submit</button>
</form>

Quero saber quando a solicitação HTTP for concluída. Isso é possível? Há algum evento que eu possa ouvir?

Obviamente isso não vai funcionar, mas estou pensando no seguinte:

const el = document.getElementById('my-form')
el.addEventListener('action-complete', evt => {
  console.log('HTTP request from action is complete')
})
javascript

1 respostas

  1. Best Answer

    Para manipular o evento quando um botão de envio é clicado e a resposta é recebida, você pode usar a API fetch do JavaScript ou o objeto XMLHttpRequest para fazer uma solicitação HTTP assíncrona. Você pode então anexar um ouvinte de evento ao botão de envio para capturar o evento de clique e manipular a resposta. Aqui está um exemplo usando a API fetch:

        <!DOCTYPE html>
    <html>
    <head>
      <title>Submit Button Event</title>
    </head>
    <body>
    
    <form action="#" method="GET">
      <button id="submitButton" type="button">submit</button>
    </form>
    <button >Submit</button>
    
    <script>
    document.getElementById("submitButton").addEventListener("click", function() {
  fetch("http://your-server-endpoint", {
    method: "GET",
    headers: {
      "Content-Type": "application/json"
    }
  })
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => {
    // Handle the response data
    console.log("Response received:", data);
    // You can add your logic here to handle the response
  })
  .catch(error => {
    console.error("There was a problem with the fetch operation:", error);
  });
});
    </script>
    
    </body>
    </html>

    Além disso, você pode usar JQuery

    • -2

relate perguntas