我希望这是一个简单的问题。我正在使用 Mailchimp API 从我的网站提交一个简单的电子邮件注册表单。我现在正在尝试学习 javascript，所以我正在尝试在没有 jQuery 的情况下执行 httprequest 和回调。基本上，我正在尝试将我在网上找到的这个 jQuery 示例转换为 vanilla Javascript。但是我的 javascript 有一些(几件事？)我不明白的错误。

编辑:提交表单后，我被带到 email-validate.php 页面，并显示 MailChimp 返回的以下错误对象。

{"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"}]}

j查询

Found here (这实际上抛出一个 ajax(...)。成功不是控制台中的函数错误，但仍然提交表单，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');
    });
  });
});

我的 Javascript(不起作用)

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);
    })
});

我的html

<form class="mc-form" method="POST" action="./email-validate.php">
    <h2 class="launch-alerts">Never miss a launch with Launch Alerts</h2>
    <label for="mc-email">Email Address:</label>
    <input type="email" id="mc-email" name="mc-email" autofocus="true" required/>
    <input type="text" value="pending" id="status" name="status" hidden/>
    <input type="submit" value="Submit">
</form>

它使用一个 php 文件来验证和提交表单，如上面的链接所示。 html 和 php 在使用 jQuery 脚本时提交表单，但不是我的 javascript，这意味着我的脚本有问题，但我对 javascript 太陌生了，无法完全理解我正在尝试做什么，并且我做错了什么。

谢谢!

编辑 2:

PHP代码(直接复制自here

<?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;
?>

最佳答案

request.send() 的数据参数必须是 URL 编码的字符串，您正在传递一个对象。 jQuery 会自动为你做这个转换；当你自己做的时候，你也必须自己做。

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

您也没有将提交函数正确添加到表单的 submit 事件中。应该是:

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

关于javascript - 通过 Mailchimp 返回错误、Javascript 和 php 提交电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39105029/