Metodo POST para enviar datos de formulario con AJAX sin JQUERY

Question

Hola tengo un script en js que me envía los datos del formulario de una página al servidor y me funciona bien con una función de Jquery pero me gustaría poder hacerlo sin el uso de Jquery.

script con jQuery (funciona)

$("#contact-form").on("submit", function(event) {
   event.preventDefault();
   $.ajax({
     type: "POST",
     url: "php/email-sender.php",
     data: {
       name: $("#contact-form #name").val(),
       email: $("#contact-form #email").val(),
       subject: $("#contact-form #subject").val(),
       message: $("#contact-form #message").val()
     },
     dataType: "json",
     success: function(data) {
    console.log(“success”);
       } else {
              console.log(“error”);
       }
     },
     error: function() {
         console.log(“error”);
     }
   });
 });

script en PHP que recibe los datos

session_cache_limiter('nocache');    
header('Expires: ' . gmdate('r', 0));    
header('Content-type: application/json');      

$Recipient = 'info@ejemplo.com'; // <-- Set your email here    

if($Recipient) {      

    $Name = $_POST['name'];  
    $Email = $_POST['email'];  
    $Subject = $_POST['subject'];  
    $Message = $_POST['message'];  
    if (isset($_POST['category'])) {  
        $Category = $_POST['category'];  
    }

    $Email_body = "";    
    if (isset($_POST['category'])) {  
        $Email_body .= "From: " . $Name . "\n" .  
        "Email: " . $Email . "\n" .  
        "Subject: " . $Subject . "\n" .  
        "Message: " . $Message . "\n" .  
        "Category: " . $Category . "\n";  
    } else {  
        $Email_body .= "From: " . $Name . "\n" .  
        "Email: " . $Email . "\n" .  
        "Subject: " . $Subject . "\n" .  
        "Message: " . $Message . "\n" .   
        "Enviado el " . date('d/m/Y', time());  
    }   

    $Email_headers = "";  
    $Email_headers .= 'From: ' . $Name . ' <' . $Email . '>' . "\r\n".  
    "Reply-To: " .  $Email . "\r\n";  

    $sent = mail($Recipient, $Subject, $Email_body, $Email_headers);  

    if ($sent){   
        $emailResult = array ('sent'=>'yes');  
    } else{  
        $emailResult = array ('sent'=>'no');  
    }  

    echo json_encode($emailResult);  

} else {  

    $emailResult = array ('sent'=>'no');  
    echo json_encode($emailResult);  

} 

HTML asociado

<form id="contact-form" role="form">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="name" name="name" placeholder="Nombre" required>
      </div>
      <div class="form-group has-feedback">
        <input type="email" class="form-control" id="email" name="email" placeholder="Correo electronico" required>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="subject" name="subject" placeholder="Asunto" required>
      </div>
      <div class="form-group has-feedback">
        <textarea class="box-msg" rows="6" id="message" name="message"> </textarea>
      </div>
      <div class="form-group has-feedback">
        <input type="submit" value="Enviar" class="submit-button btn btn-default">
      </div>
</form>

Primer intento sin jQuery

// Submit contactForm START
const contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var request = new XMLHttpRequest();
  request.open("POST", "/php/email-sender.php", true);
  request.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded; charset=UTF-8"
  );

  request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
      // request end.
      if (request.status == 200) {
        // success START
        console.log(request.response);
        // success END
      } else {
        // error START
        console.log("error");
        // error END
      }
    }
  };

  var formData = new FormData();
  data.append("name", document.getElementById("name").value);
  data.append("email", document.getElementById("email").value);
  data.append("subject", document.getElementById("subject").value);
  data.append("message", document.getElementById("message").value);
  request.send(formData);
});

segundo intento sin jQuery

var contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var request = new XMLHttpRequest();
  request.open("POST", "/php/email-sender.php", true);
  request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

  request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
      // request end.
      if (request.status == 200) {
        // success START
        console.log(request.response);
        // success END
      } else {
        // error START
        console.log("error");
        // error END
      }
    }
  };

  var data = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    subject: document.getElementById("subject").value,
    message: document.getElementById("message").value
  };
  request.send(JSON.stringify(data));
});

ninguno de los 2 intentos tienen exito, gracias de antemano.

Answer 1

El problema se debe a que no puedes pasarle a request.send un objeto plano.

Solución:

Dado que intentas enviar los campos del formulario contact-form, es conveniente crear un FormData a partir del mismo.

Ejemplo:

var request = new XMLHttpRequest();
request.open('POST', '/php/email-sender.php', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

request.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE) {
    // Peticion terminada.
    if (request.status == 200) {
      // Todo salio bien
      console.log(request.response);
    } else {
      // Hubo un problema
    }
  }
}

var formData = new FormData(document.getElementById('contact-form'));
request.send(formData);

Mas info:

• MDN - XMLHttpRequest