gpt4 book ai didi

javascript - 使用 Javascript AJAX(不是 jQuery)提交嵌入式 Mailchimp 表单

转载 作者:行者123 更新时间:2023-11-29 14:49:03 24 4
gpt4 key购买 nike

我一直在尝试使用 AJAX 提交嵌入式 Mailchimp 表单,但没有使用 jQuery。显然,我没有正确地这样做,因为我一直以“来吧,华生,来吧!比赛正在进行中”结束。页:(

如有任何帮助,我们将非常感谢。

form action 已更改为将 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();

});

另外,我预料到不可避免的“你为什么不直接使用 jQuery”的评论。在不深入了解这个项目的细节的情况下,我无法将 jQuery 引入代码中。抱歉,但这必须是 vanilla javascript。兼容性仅适用于非常现代的浏览器。

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

最佳答案

几天前,我遇到了完全相同的问题,结果证明关于原生 JavaScriptMailChimp 文档非常少。我可以与您分享我想出的代码。希望您能从这里开始 build !

简化的 HTML 表单:我从 MailChimp 表单生成器中获取了 from 操作并添加了“post-json”

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

JavaScript:避免跨源问题的唯一方法是创建脚本并将其附加到 header 。然后回调发生在“c”参数上。 (请注意,目前还没有电子邮件地址验证)

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

关于javascript - 使用 Javascript AJAX(不是 jQuery)提交嵌入式 Mailchimp 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28908100/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com