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. 通过选择列表>注册表单>（经典表单）获取列表的URL。您可以在“复制/粘贴到您的网站”textarea上找到它，它很可能以您的用户名开头。

   $('#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
              }
           }
       });
   });