Não consigo enviar esse formulário via Ajax!

Front-end JavaScript
#1

Olá tenho esse código de formulário caso a pessoa queira ajudar o meu projeto:

    <form id="my-form" action="envia.php" method="POST">
                <label for="fname"><i class="fa fa-user"></i> Nome</label>
                <input type="text" id="fname" name="firstname" placeholder="seu nome e sobrenome">
                <label for="email"><i class="fa fa-envelope"></i> Email</label>
                <input type="text" id="email" name="email" placeholder="john@example.com">
                <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
                <input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
                <label for="city"><i class="fa fa-institution"></i> City</label>
                <input type="text" id="city" name="city" placeholder="New York">
                <label for="cname">Name on Card</label>
                <input type="text" id="cname" name="cardname" placeholder="John More Doe">
                <label for="ccnum">Numero do Cartão:</label>
                <input type="number" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
                <label for="expmonth">Mês de Expiração:</label>
                <input type="number" id="expmonth" name="expmonth" placeholder="Setembro">
                <label for="expear">Exp Year</label>
                <input type="number" id="expyear" name="expyear" placeholder="2018" pattern="[0-9]+$">
                <label for="cvv">CVV</label>
                <input type="number" id="cvv" name="cvv" placeholder="352">
                <button id="my-form-button" type="submit">Submit</button>
<p id="my-form-status"></p>
            </form>

até ai tudo bem pois ele envia certinho o formulário no banco de dados,mais eu queria que ele fizesse isso só que sem refresh por isso eu decidi usar ajax então criei esse código:

          window.addEventListener("DOMContentLoaded", function() {        
var form = document.getElementById("my-form");
            var button = document.getElementById("my-form-button");
            var status = document.getElementById("my-form-status");

            // Success and Error functions for after the form is submitted
            
            function success() {
              form.reset();
              button.style = "display: none ";
              status.innerHTML = "Obrigado!!";
            }

            function error() {
              status.innerHTML = "Oops! Temos problemas , tente novamente mais tarde";
            }

            // handle the form submission event

            form.addEventListener("submit", function(ev) {
              ev.preventDefault();
              var data = new FormData(form);
              ajax(form.method, form.action, data, success, error);
            });
          });
          
          // helper function for sending an AJAX request

          function ajax(method, url, data, success, error) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url);
            xhr.setRequestHeader("Accept", "application/json");
            xhr.onreadystatechange = function() {
              if (xhr.readyState !== XMLHttpRequest.DONE) return;
              if (xhr.status === 200) {
                success(xhr.response, xhr.responseType);
              } else {
                error(xhr.status, xhr.response, xhr.responseType);
              }
            };
            xhr.send(data);
          }

só que ele só da erro estou fazendo do jeito certo?

#2

Campeao, o erro esta no action do form.

Voce deve limpar ele, e utilizar o action no ajax do arquivo jquery e nao enviar para o arquivo php.

#3

Poderia me dar o exemplo de código?

#4