使用Javascript AJAX提交嵌入式Mailchimp表单（不是jQuery）

我一直在尝试使用AJAX提交嵌入式Mailchimp表单，但没有使用jQuery。显然，我做得不好，因为我一直在“来吧，沃森，来吧！游戏正在进行中。”页面：(

对此的任何帮助都将不胜感激

表单操作

已被更改为将

post？u=

替换为

post json？u=

，并且

&c=？

已添加到操作字符串的末尾。以下是我的js：

document.addEventListener('DOMContentLoaded', function() {

    function formMailchimp() {

        var elForm         = document.getElementById('mc-embedded-subscribe-form'),
            elInputName    = document.getElementById('mce-NAME'),
            elInputEmail   = document.getElementById('mce-EMAIL'),
            strFormAction  = elForm.getAttribute('action');

        elForm.addEventListener('submit', function(e) {

            var request = new XMLHttpRequest();

            request.open('GET', strFormAction, true);
            request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

            request.onload = function() {

                if (request.status >= 200 && request.status < 400) {

                    // Success!
                    var resp = JSON.parse(request.responseText);

                    request.send(resp);

                } else {

                    console.log('We reached our target server, but it returned an error');

                }

            };

            request.onerror = function() {
                console.log('There was a connection error of some sort');
            };

        });

    }

    formMailchimp();

});

document.addEventListener（'DOMContentLoaded'，function（）{
函数formMailchimp（）{
var elForm=document.getElementById（'mc-embedded-subscribe-form'），
elInputName=document.getElementById（'mce-NAME'），
elInputEmail=document.getElementById（'mce-EMAIL'），
strFormAction=elForm.getAttribute（'action'）；
elForm.addEventListener（'submit'，函数（e）{
var request=new XMLHttpRequest（）；
打开（'GET'，strformation，true）；
setRequestHeader（'Content-Type'，'application/json；charset=UTF-8'）；
request.onload=函数（）{
如果（request.status>=200&&request.status<400）{
//成功！
var resp=JSON.parse（request.responseText）；
请求发送（resp）；
}否则{
log（'我们到达了目标服务器，但它返回了一个错误'）；
}
};
request.onerror=函数（）{
log（'存在某种类型的连接错误'）；
};
});
}
formMailchimp（）；
});

此外，我预计不可避免地会出现“为什么不直接使用jQuery”的评论。如果不深入讨论本项目的细节，我无法将jQuery引入代码中。对不起，这必须是普通的javascript。兼容性仅适用于非常现代的浏览器

---

非常感谢您提供的任何帮助！

几天前，我遇到了完全相同的问题，结果是关于本机JavaScript的MailChimp文档非常稀少。我可以与您分享我提出的代码。希望您可以从这里开始构建

简化的HTML表单：我从MailChimp表单生成器获得了操作，并添加了“PostJSON”

---

嘿@Hanslibuzli！我终于开始尝试你的代码了，但是我在控制台中发现了这个错误：[JSON.parse:JSON数据第1行第1列的数据意外结束]…指向这一行：[var-ChimpResponse=JSON.parse（this.response）；]有趣的是，我最终收到了一封来自Mailchimp的确认邮件。你知道如何解决这个问题吗？谢谢！嗨@beefchimi我刚刚更新了我的原始答案-希望这有帮助！我尝试了一下，我知道这已经有几年了…这篇文章不起作用。这是我在vanilla js ajax提交上找到的唯一帮助。我得到了错误

为具有源的加载失败”http://localhost/NAME.us1.list-manage.com/subscribe/post-jso…8a3&id={removed}&c=document.MC_回调和电子邮件=test@test.com“

@Matt-我希望您能解决这个问题。您需要将html代码更改为

<div id="newsletter">
    <form action="NAME.us1.list-manage.com/subscribe/post-json?u=XXXXXX&amp;id=XXXXXXX">
        <input class="email" type="email" value="Enter your email" required />
        <input class="submit" type="submit" value="Subscribe" />
    </form>
</div>

function newsletterSubmitted(event) {
    event.preventDefault();

    this._form = this.querySelector("form");
    this._action = this._form.getAttribute("action");
    this._input = this._form.querySelector("input.email").value;

    document.MC_callback = function(response) {

        if(response.result == "success") {
            // show success meassage

        } else {
            // show error message

        }
    }

    // generate script
    this._script = document.createElement("script");
    this._script.type = "text/javascript";
    this._script.src = this._action + "&c=document.MC_callback&EMAIL=" + this._input;

    // append script to head    
    document.getElementsByTagName("head")[0].appendChild(this._script);
}

var newsletter = document.querySelector("#newsletter")
newsletter.addEventListener("submit", newsletterSubmitted);