jquery - Mailchimp 使用 jQuery AJAX 订阅？

Question

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

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

Answer 1

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

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

XMLHttpRequest cannot load http://YOUR-MAILCHIMP-URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://BROWSER-LOCATION is therefore not allowed access.

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

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

更新后的函数的前几行应如下所示。

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

Answer 2

1. 通过选择List > Sign Up forms > (Classic form)获取列表的 URL 。您将在“复制/粘贴到您的网站”文本区域中找到它，并且它很可能以您的用户名开头。

   $('#your-form').submit(function (e) {
       e.preventDefault();
   
       $.ajax({
           url: 'YOUR URL',
           type: 'GET',
           data: $('#your-form').serialize(),
           dataType: 'jsonp',
           contentType: "application/json; charset=utf-8",
           success: function (data) {
              if (data['result'] != "success") {
                   //ERROR
                   console.log(data['msg']);
              } else {
                   //SUCCESS - Do what you like here
              }
           }
       });
   });