Email senden über Mailchimp Fehler, Javascript und PHP

Question

Ich hoffe, dies ist ein einfaches Problem. Ich verwende die Mailchimp-API, um ein einfaches E-Mail-Anmeldeformular von meiner Website aus zu senden. Ich versuche jetzt, Javascript zu lernen, also versuche ich, den httprequest und Rückruf ohne jQuery zu tun. Im Grunde versuche ich, dieses jQuery-Beispiel, das ich online fand, zu Vanille-Javascript zu konvertieren. Aber da ist etwas (mehrere Dinge?) Falsch mit meinem Javascript, das ich nicht verstehe.

BEARBEITEN: Wenn das Formular gesendet wird, bin ich auf die Seite email-validate.php genommen, und zeigen Sie das folgende Fehler-Objekt von MailChimp zurückgegeben.

{"type":"http://developer.mailchimp.com/documentation/mailchimp/guides/error-glossary/","title":"Invalid Resource","status":400,"detail":"The resource submitted could not be validated. For field-specific details, see the 'errors' array.","instance":"","errors":[{"field":"","message":"Required fields were not provided: email_address"},{"field":"email_address","message":"Schema describes string, NULL found instead"}]} 

jQuery

Found here (das ist eigentlich eine Ajax wirft (...). Erfolg ist kein Funktionsfehler in der Konsole ist aber trägt noch die Form, FWIW)

$('document').ready(function(){ 
    $('.mc-form').submit(function(e){ 

    //prevent the form from submitting via the browser redirect 
    e.preventDefault(); 

    //grab attributes and values out of the form 
    var data = {email: $('#mc-email').val()}; 
    var endpoint = $(this).attr('action'); 

    //make the ajax request 
    $.ajax({ 
     method: 'POST', 
     dataType: "json", 
     url: endpoint, 
     data: data 
    }).success(function(data){ 
     if(data.id){ 
     //successful adds will have an id attribute on the object 
     alert('thanks for signing up'); 
     } else if (data.title == 'Member Exists') { 
     //MC wil send back an error object with "Member Exists" as the title 
     alert('thanks, but you are alredy signed up'); 
     } else { 
     //something went wrong with the API call 
     alert('oh no, there has been a problem'); 
     } 
    }).error(function(){ 
     //the AJAX function returned a non-200, probably a server problem 
     alert('oh no, there has been a problem'); 
    }); 
    }); 
}); 

Meine Javascript (das funktioniert nicht)

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById("mc-form", function submit(e){ 
     e.preventDefault(); 

     var data = {"email": document.getElementById("mc-email").value}; 
     var endpoint = document.getElementById("mc-form").getAttribute('action'); 

     function formSubmit(callback){ 
      var request = new XMLHttpRequest(); 

       request.onreadystatechange = function() { 
        if (request.readyState === 4) { 
         if (request.status === 200) { 
         //Parse returned string into an object, then pass the object to the callback function. 
         var response = JSON.parse(request.responseText); 
         callback(response); 
         } else { 
        console.log('JSON request error'); 
         } 
        } 
       } 
      request.open("POST", endpoint , true); 
      request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
      request.send(data); 
     } 
     function formResponse(response){ 
      if(response.id){ 
      //successful adds will have an id attribute on the object 
      alert('Thank you for signing up for Launch Alerts!'); 
      } else if (response.title == 'Member Exists') { 
      //MC wil send back an error object with "Member Exists" as the title 
      alert('You are already signed up for Launch Alerts!'); 
      } else { 
      //something went wrong with the API call 
      alert('Something went wrong. Please resubmit the form!'); 
      } 
     } 
     formSubmit(formResponse); 
    }) 
}); 

Meine html

Es verwendet eine PHP-Datei, um das Formular zu validieren und zu senden, wie auf dem obigen Link zu sehen ist. Die HTML und PHP arbeiten, um das Formular zu senden, wenn Sie das jQuery-Skript, aber nicht mein Javascript, was bedeutet, dass etwas mit meinem Skript falsch ist, aber ich bin zu neu mit Javascript, um zu verstehen, was ich versuche zu tun, und was ich falsch mache.

Danke!

EDIT 2:

Der PHP-Code (

<?php 
//fill in these values for with your own information 
$api_key = 'xxxxxxxxxxxxxxxxxxxxxxxx'; 
$datacenter = 'xxxxx'; 
$list_id = 'xxxxxxxxx'; 
$email = $_POST['email']; 
$status = 'pending'; 
if(!empty($_POST['status'])){ 
    $status = $_POST['status']; 
} 
$url = 'https://'.$datacenter.'.api.mailchimp.com/3.0/lists/'.$list_id.'/members/'; 
$username = 'apikey'; 
$password = $api_key; 
$data = array("email_address" => $email,"status" => $status); 
$data_string = json_encode($data); 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL,$url); 
curl_setopt($ch, CURLOPT_POST, 1); 
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); 
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); 
curl_setopt($ch, CURLOPT_USERPWD, "$username:$api_key"); 
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
    'Content-Type: application/json', 
    'Content-Length: ' . strlen($data_string)) 
); 
$result=curl_exec ($ch); 
curl_close ($ch); 
echo $result; 
?> 

Answer 1

Die Daten Argument request.send() direkt von here kopiert muss eine URL-codierte Zeichenfolge sein, vorbei sind Sie ein Objekt jQuery funktioniert diese Umwandlung. automatisch für Sie;., wenn Sie es selbst tun, Sie haben auch zu tun, dass sich

var data = "email=" + encodeURIComponent(document.getElementById("mc-email").value); 

sind Sie auch das Hinzufügen nicht Ihre Vorlage Spaß ction zu dem submit Ereignis des Formulars korrekt. Es sollte sein:

document.getElementById("mc-form").addEventListener("submit", function submit(e){ 

Answer 2

Sie können URL-Parameter manuell hinzufügen die URL:

var endpoint = document.getElementById("mc-form").getAttribute('action') + 
       "?email=" + document.getElementById("mc-email").value; 

Und dann tun nur

request.send(); 

ohne die Daten darin.