如何有效地调试对 MailChimp 3.0 服务器的 JQuery GET 请求?
Posted
技术标签:
【中文标题】如何有效地调试对 MailChimp 3.0 服务器的 JQuery GET 请求?【英文标题】:How do I effectively debug a JQuery GET request to MailChimp 3.0 servers? 【发布时间】:2020-04-18 14:11:36 【问题描述】:我正在尝试将用户的电子邮件添加到我的 Mailchimp 3.0 受众列表中。我正在使用 JQuery 发出 GET 请求,但出现以下错误:
"type":"http://developer.mailchimp.com/documentation/mailchimp/guides/error-glossary/","title":"API Key Invalid","status":401,"detail":"Your request did not include an API key.","instance":"1e63d45d-2f46-481f-a674-3c307033cd29"
在我单击按钮触发请求后发生此错误。
这是我的 html 代码中 JQuery 脚本从中提取的部分:
<form **action="https://us4.api.mailchimp.com/3.0/lists/8a99d9c7eb/members/>"**
method="get" **id="mc-embedded-subscribe-form"** name="mc-embedded-subscribe-form" class="validate">
<p class="signUp mt-5">
We are currently Beta testing our service and will reveal more
soon. Enter your email address below to receive updates.
</p>
<div class="form-label-group">
<input type="email" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="form-control"
placeholder="Email address" required autofocus>
</div>
<input type="submit" value="Notify me" name="subscribe" id="mc-embedded-subscribe" class="btn btn-sm btn-success mt-1 shadow-lg">
<div id="subscribe-result"></div>
<!-- <button class="btn btn-sm btn-success mt-1 shadow-lg" id="submitInfo"
type="submit">Notify
Me</button> -->
</form>
这是我的 JQuery 代码:
$(document).ready(function ()
var $form = $('#mc-embedded-subscribe-form')
if ($form.length > 0)
$('form input[type="submit"]').bind('click', function (event)
if (event) event.preventDefault()
register($form)
)
)
function register($form)
$('#mc-embedded-subscribe').val('Sending...');
$.ajax(
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
status: "unsubscribed",
headers:
'Authorization': 'Basic ' + new Buffer(`anything': 'apikey xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-usx`)
,
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
error: function (err)
alert('Could not connect to the registration server. Please try again later.')
,
success: function (data)
$('#mc-embedded-subscribe').val('subscribe')
if (data.result === 'success')
// Yeahhhh Success
console.log(data.msg)
$('#mce-EMAIL').css('borderColor', '#ffffff')
$('#subscribe-result').css('color', 'rgb(53, 114, 210)')
$('#subscribe-result').html('<p>Thank you for subscribing. We have sent you a confirmation email.</p>')
$('#mce-EMAIL').val('')
else
// Something went wrong, do something to notify the user.
console.log(data.msg)
$('#mce-EMAIL').css('borderColor', '#ff8282')
$('#subscribe-result').css('color', '#ff8282')
$('#subscribe-result').html('<p>' + data.msg.substring(4) + '</p>')
)
;
我已尝试使用 Fetch 和 AJAX 发出此请求,但没有雪茄。这种方法帮助我取得了进步,但遇到了这个小问题。我查看了以下问题和答案以获得更多支持:
javascript + MailChimp API subscribe
AJAX Mailchimp signup form integration Access MailChimp API 3.0 (GET)
最后,这里是 MailChimp API 文档。
Add a Contact to a List/Audience (1 paragraph)
Add a new list member (search on "Add a new list member")
HTTP Basic Authentication(fourth paragraph)
谢谢你的帮助!!
【问题讨论】:
在您的代码中 event.preventDefault() 不起作用,正在重定向到表单操作 url 【参考方案1】:在前端公开您的 API 密钥并不是一个好主意。您可以按照此方法将用户添加到特定列表/受众
<!-- Please copy your form from Mailchimp Signup form ( condensed in your case ) or copy the form and input values from the form -->
<form action="Your url from signup form" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="from signup form" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
下面是ajax请求
$(document).ready(function ()
$("#mc-embedded-subscribe-form").submit(function (e)
let form = $("#mc-embedded-subscribe-form")
e.preventDefault();
var settings =
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
dataType: 'jsonp',
contentType: "application/json; charset=utf-8",
;
$.ajax(settings).done(function (response)
console.log(response);
);
)
)
【讨论】:
这种方法将打开第二种形式,由 Mailchimp 设计。我希望保留我的自定义表单并直接提交到我的受众列表。 不,它会提交表单而不进行重定向或任何操作。我测试了这段代码,它的工作非常好,没有任何重定向或任何东西。您可以按照自己的方式设计此表单。 如果您仍想保留已有的表单。只需从 Mailchip 注册表单中复制表单操作 url 并使用给定的 jquery 代码 啊,我明白了。谢谢阿克巴!以上是关于如何有效地调试对 MailChimp 3.0 服务器的 JQuery GET 请求?的主要内容,如果未能解决你的问题,请参考以下文章
Spring MVC 3.0:如何有效地验证对所有请求映射都是全局的路径变量?
Mailchimp 如何在 javascript 中调用 mailchimp 3.0 API
如何通过 MailChimp 3.0 api 发送电子邮件?