web-dev-qa-db-fra.com

Soumettre le formulaire et rester sur la même page?

J'ai un formulaire qui ressemble à ceci

<form action="receiver.pl" method="post">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

et j'aimerais rester sur la même page lorsque vous cliquez sur Soumettre, mais que receiver.pl est toujours exécuté.

Comment cela devrait-il être fait?

javascripthtmlperl
48
Sandra Schlichting

La réponse la plus simple: jQuery. Faites quelque chose comme ça:

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

Si vous souhaitez ajouter du contenu de manière dynamique et que vous en avez encore besoin, et avec plusieurs formulaires, vous pouvez le faire:

   $('form').live('submit', function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
64
Herman Schaaf

99% du temps, j'utilisais XMLHttpRequest ou fetch pour quelque chose comme ceci. Cependant, il existe une solution alternative qui ne nécessite pas de javascript ...

Vous pouvez inclure une iframe masquée sur votre page et définir l'attribut cible de votre formulaire pour qu'il pointe vers cette iframe.

<style>
  .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>

<iframe name="hiddenFrame" class="hide"></iframe>

<form action="receiver.pl" method="post" target="hiddenFrame">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

Il y a très peu de scénarios dans lesquels je choisirais cette voie. Généralement, il est préférable de le manipuler avec javascript car, avec javascript, vous pouvez ...

  • traitez les erreurs avec élégance (par exemple, réessayez)
  • fournir des indicateurs d'interface utilisateur (par exemple, chargement, traitement, succès, échec)
  • exécuter la logique avant que la demande soit envoyée, ou exécuter la logique après la réception de la réponse.
58
jessegavin

Pour ce faire, la méthode HTTP/CGI consisterait pour votre programme à renvoyer un code d’état HTTP de 204 (aucun contenu).

33
Dave Cross

Lorsque vous cliquez sur le bouton d'envoi, la page est envoyée au serveur. Si vous voulez l'envoyer async, vous pouvez le faire avec ajax.

4
Eric Frick

Utilisez XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array()); 
// xhr.send(document);
0
Hasan A Yousef