web-dev-qa-db-fra.com

AJAX Post implémentation en Javascript pur

y a-t-il une implémentation de AJAX Post en Javascript pur (peut-être en utilisant xmlhttprequest)?

Par exemple, si j'ai un formulaire comme celui-ci:

<form action="request.php" id="register_form">
  <input type="text" name="first_name" placeholder="First Name">
  <input type="text" name="last_name" placeholder="LastName">
  <input type="submit" value="submit_now">
</form>

et ceci est mon implémentation du AJAX dans jQuery

$('#register_form').submit(function(e) {

var postData = $(this).serializeArray();
var formURL = $(this).attr("action");

/* start ajax submission process */
$.ajax({
    url: formURL,
    type: "POST",
    data: postData,
    success: function(data, textStatus, jqXHR) {
        alert('Success!');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert('Error occurred!');
    }

});

e.preventDefault(); //STOP default action

/* ends ajax submission process */

});

Puis-je faire de même SANS l'utilisation de jQuery? Si c'est possible, comment puis-je implémenter le code jQuery ci-dessus en code Javascript pur/simple?

javascriptjqueryajaxxmlhttprequest
15
Fariz Luqman

Oui et bien sûr c'est possible :)

<form action="request.php" id="register_form">
  <input class='formVal' type="text" name="first_name" placeholder="First Name">
  <input class='formVal' type="text" name="last_name" placeholder="LastName">
  <input type="submit" value="submit_now" onclick="myFunction(); return false;">
</form>

JS 

function myFunction()
{
    var elements = document.getElementsByClassName("formVal");
    var formData = new FormData(); 
    for(var i=0; i<elements.length; i++)
    {
        formData.append(elements[i].name, elements[i].value);
    }
    var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                alert(xmlHttp.responseText);
            }
        }
        xmlHttp.open("post", "server.php"); 
        xmlHttp.send(formData); 
}

server.php

<?php
   $firstName = $_POST["first_name"];
   $lastName = $_POST["last_name"];
   echo $firstName." ".$lastName;
   //enter name and lastname into your form and onclick they will be alerted 
?>

Explication: La fonction prend les éléments de forme par leurs noms de classe et les stocke dans un tableau. Ensuite, nous créons un objet FormData et parcourons le tableau d'éléments pour chaque élément et ajoutons leur nom et leur valeur à l'objet FormData. Après cela, nous créons un objet XMLHttpRequest () qui surveille les changements d'état et de statut pendant la demande et envoie également des données avec la méthode post à server.php Quand il est terminé et readystate est égal à 4 et l'état est égal à 200, nous alertons réponse de server.php, que nous enregistrons dans l'attribut responseText de l'objet XMLHttpRequest.

30
DDeme

Pour sûr, vous pouvez utiliser Ajax uniquement Reqwest lib.

Quelque chose comme:

reqwest({
    url: 'path/to/json'
  , type: 'json'
  , method: 'post'
  , error: function (err) { }
  , success: function (resp) {
      qwery('#content').html(resp.content)
    }
})

Et selon leur README vous pouvez utiliser:

$(form).serialize()
1
Jonatas Walker