Mailchimp如何使用jQuery AJAX进行订阅？

Question

什么是完整的jQuery解决方案，可用于订阅Mailchimp中的用户列表？

问题在于大多数解决方案要么使用库，要么需要服务器端代码。我想要一种快速优雅的解决方案，它可以让我完全控制表单的UI和功能，从而提高用户体验。

- Nagra

---

问题 AJAX Mailchimp注册表单集成 也有一些不错的建议。 - Simon East

Answer 1

@Nagra的解决方案很好，但是如果从客户端浏览器执行，它会因为生效的同源安全策略而抛出错误。实质上，这些安全措施旨在防止跨站点请求，当发起者和发送者位于不同的域时就会发生。

如果您在JavaScript控制台中看到以下类似错误，则是明确的指示。

XMLHttpRequest无法加载http://YOUR-MAILCHIMP-URL。所请求的资源上不存在'Access-Control-Allow-Origin'标头。因此，来自 http://BROWSER-LOCATION 的请求被拒绝访问。

要解决这个问题，脚本需要重写以利用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',

- nneko

---

@danielCrabbe 在这个例子中，我使用了相对 URL，但是如果您指定协议并使用完整的绝对值，也不会有任何问题。 - nneko

谢谢。所以“//”是相对于根目录的吗？也就是和“/”一样？ - v3nt

@danielCrabbe 是的，它与/相同。然而，由于URL字符串应该是以<protocol>://<destination>格式呈现，我认为我们仍然需要//，但只使用/也可能可行。 - nneko

“type: 'POST'” 与 “jsonp” 搭配是没有意义的。很可能 type 参数被忽略了。 - Kevin B

@KevinB 这个解决方案仍然适用。但是，如果你有更好的答案，请发表或展示这个答案可以在哪些方面得到改进。向其他人解释为什么类型字段可能会被忽略或不适用于jsonp数据类型，比仅仅发布一行话来说它没有意义，对他人更有用和教育意义。 - nneko

Answer 2

1. Obtain the URL for the list by selecting the List > Sign Up forms > (Classic form). You will find it on the 'Copy/paste onto your site' textarea and it will most likely begin with your username.

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

- Nagra

---

您的contentType值与您发送的数据不匹配。 - Kevin B

因此，@nneko的解决方案更好 :-) - Nagra