jquery - Mailchimp 使用 jQuery AJAX 订阅？

Question

在 Mailchimp 上订阅列表的完整 jQuery 解决方案是什么？

问题是大多数解决方案要么使用库，要么需要服务器端代码。我想要一个快速优雅的解决方案，它使我能够完全控制 UI，从而控制表单的 UX 及其功能。

Answer 1

@Nagra 的解决方案很好，但由于有效的同源安全策略，从客户端浏览器执行时会抛出错误。从本质上讲，这些安全措施是为了防止当发起者和发件人位于不同域时发生跨站点请求。

如果您在 JavaScript 控制台中看到如下错误，则这是一个明确的指示。

XMLHttpRequest cannot load <a href="http://YOUR-MAILCHIMP-URL" rel="noreferrer noopener nofollow">http://YOUR-MAILCHIMP-URL</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin <a href="http://BROWSER-LOCATION" rel="noreferrer noopener nofollow">http://BROWSER-LOCATION</a> is therefore not allowed access.

为了解决这个问题，需要重写脚本以利用 CORS 或 JSONP。由于 MailChimp API 不支持 CORS，唯一的选择是未记录的 JSONP 接口(interface)。

更改 URL 以使用/subscribe/post-json? 版本，并在末尾附加 &c=?。更新 URL 后，您还需要将 JSON 哈希中的 dataType 修改为 jsonp

更新后的函数前几行应类似于以下内容。

$.ajax({
    url: '//YOUR URL&id=YOUR LIST ID&c=?',
    data: $('#YOUR FORM').serialize(),
    dataType: 'jsonp',