web-dev-qa-db-fra.com

XMLHttpRequest pour publier un formulaire HTML

Configuration actuelle

J'ai un formulaire HTML comme ça.

<form id="demo-form" action="POST" method="post-handler.php">
   <input type="text" name="name" value="previousValue"/>
   <button type="submit" name="action" value="dosomething">Update</button>
</form>

J'ai peut-être plusieurs de ces formulaires sur une page.

Ma question  

Comment envoyer ce formulaire de manière asynchrone sans être redirigé ni actualiser la page? Je sais comment utiliser XMLHttpRequest. Le problème que j'ai est de récupérer les données du code HTML en javascript pour ensuite les insérer dans une chaîne de demande de publication. Voici la méthode que j'utilise actuellement pour mes zXMLHttpRequest`'s.

function getHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xmlhttp;
}

function demoRequest() {
       var request = getHttpRequest();
       request.onreadystatechange=function() {
             if (request.readyState == 4 && request.status == 200) {
                   console.log("Response Received");
             }
       }
       request.open("POST","post-handler.php",true);
       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       request.send("action=dosomething");
}

Ainsi, par exemple, supposons que la méthode javascript demoRequest() ait été appelée lorsque le bouton de soumission du formulaire a été cliqué, comment puis-je accéder aux valeurs du formulaire à partir de cette méthode pour ensuite l'ajouter à la XMLHttpRequest?

MODIFIER

En essayant de mettre en œuvre une solution à partir d'une réponse ci-dessous, j'ai modifié mon formulaire comme suit.

<form id="demo-form">
       <input type="text" name="name" value="previousValue"/>
       <button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>

Cependant, en cliquant sur le bouton, il essaie toujours de me rediriger (vers où je ne suis pas sûr) et ma méthode n'est pas appelée?

Bouton d'écoute d'événement 

document.getElementById('updateBtn').addEventListener('click', function (evt) {
                                evt.preventDefault();

                                // Do something
                                updateProperties();

                                return false;
                            });
javascriptajaxxmlhttprequesthtml-formhtml-form-post
16
StuStirling

Le format de chaîne POST est le suivant:

name=value&name2=value2&name3=value3


Vous devez donc saisir tous les noms, leurs valeurs et les mettre dans ce format . Vous pouvez itérer tous les éléments en entrée ou en obtenir des spécifiques en appelant document.getElementById().

Attention: Vous devez utiliser encodeURIComponent() pour tous les noms et en particulier pour les valeurs afin que le possible & contenu dans les chaînes ne rompt pas le format.

Exemple:

var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);

request.send("action=dosomething&" + input.name + "=" + inputData);

Une autre option beaucoup plus simple consisterait à utiliser des objets FormData. Un tel objet peut contenir des paires nom/valeur.

Heureusement, nous pouvons construire un objet FormData à partir d'un formulaire existant et l'envoyer directement à la méthode de XMLHttpRequestsend ():

var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);
24
ComFreek

La réponse de de ComFreek est correcte mais il manque un exemple complet. 

J'ai donc écrit un extrait de travail extrêmement simplifié:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>

<script>
"use strict";
function submitForm(oFormElement)
{
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){ alert (xhr.responseText); }
  xhr.open (oFormElement.method, oFormElement.action, true);
  xhr.send (new FormData (oFormElement));
  return false;
}
</script>
</head>

<body>
<form method="POST"
      action="post-handler.php"
      onsubmit="return submitForm(this);" >
   <input type="text" name="name" value="previousValue"/>
   <input type="submit"           value="Update"/>
</form>
</body>
</html>

Cet extrait est basique et ne peut pas utiliser GET. Je me suis inspiré de l'excellent Documentation Mozilla . Ayez une lecture plus approfondie de cette documentation MDN pour en faire plus. Voir aussi cette réponse en utilisant formAction . 

11
olibre

En passant, j'ai utilisé le code suivant pour soumettre un formulaire dans une requête ajax.

 $('form[id=demo-form]').submit(function (event) {

    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");


    // serialize the data in the form
    var serializedData = $form.serialize();


    // fire off the request to specific url

    var request = $.ajax({
        url : "URL TO POST FORM",
        type: "post",
        data: serializedData
    });
    // callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){


    });

    // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){

    });

    // callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // reenable the inputs

    });

    // prevent default posting of form
    event.preventDefault();
});
2
Awais Qarni

Avec du Javascript pur, vous voulez juste quelque chose comme:

var val = document.getElementById("inputFieldID").value;

Vous voulez composer un objet data qui possède des paires clé-valeur, un peu comme 

name=John&lastName=Smith&age=3

Envoyez-le ensuite avec request.send ("name = John & lastName = Smith & age = 3");  

0
Zlatko

J'ai aussi eu ce problème, je pense.

J'ai un élément d'entrée avec un bouton. La méthode onclick du bouton utilise XMLHTTPRequest pour POST une demande au serveur, toutes codées dans le code JavaScript.

Lorsque j'ai enveloppé l'entrée et le bouton dans un formulaire, la propriété action du formulaire a été utilisée. Le bouton était nottype=submit, ce qui correspond à ma lecture du standard HTML ( https://html.spec.whatwg.org/#attributes-for-form-submission ).

Mais je l'ai résolu en surchargeant la méthode form.onsubmit comme ceci:

form.onsubmit = function(E){return false;}

J'utilisais l'édition de développeur FireFox et le chrome 38.0.2125.111 Ubuntu 14.04 (290379) (64 bits).

0
Worik