Как передать данные через post используя xhr js?

196

27 февраля 2018, 07:29

Недавно начал учить js. С xhr методом GET разобрался, а вот как через POST не пойму. Хотел вводить в первом input одно число, а во втором другое и просто их слаживать или умножать в php файле и получать результат в консоль например.

document.getElementById('getForm').addEventListener('submit', getAjax); 
 
function getAjax(e) { 
     e.preventDefault(); 
 
     var xhr = new XMLHttpRequest(); 
 
     xhr.open('POST', 'repeat.php', true); 
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     xhr.onreadystatechange = function () { 
          if (xhr.readyState == 4 & xhr.status == 200) { 
               console.log(xhr.responseText); 
 
          } else if (xhr.onerror == 404) { 
               console.log('Error'); 
 
          } 
     } 
     xhr.send(); 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
     <title>JS XHR</title> 
</head> 
 
<body> 
     <form id="getForm" method="POST"> 
          <input type="text" name="one" id="one"> 
          <input type="text" name="two" id="two"> 
          <input type="submit" value="send"> 
     </form> 
     <script src="./repeatajax.js"></script> 
</body> 
 
</html>

и php файл

<?php 
 
echo 'Processing...'; 
echo $_POST['one'] *  $two = $_POST['two'];

Answer 1

document.getElementById('getForm').addEventListener('submit', getAjax);
function getAjax(e) {
     e.preventDefault();
     var xhr = new XMLHttpRequest();
     xhr.open('POST', 'repeat.php', true);
     xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 & xhr.status == 200) {
               console.log(xhr.responseText);
          } else if (xhr.onerror == 404) {
               console.log('Error');
          }
     }
     xhr.send(new FormData(e.target));
}