Mailchimp 使用 jQuery AJAX 订阅？

Posted 2023-03-24

【中文标题】Mailchimp 使用 jQuery AJAX 订阅？

【英文标题】：Mailchimp subscribe using jQuery AJAX?

【发布时间】：2014-02-26 21:11:29

【问题描述】：

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

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

【问题讨论】：

问题AJAX Mailchimp signup form integration也有一些不错的建议。

【参考方案1】：

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

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

XMLHttpRequest cannot load @987654321@. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin @987654322@ 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',

【讨论】：

@danielCrabbe 在示例中我使用了相对 url，但是如果您通过指定协议使用完整的绝对值，则不会有问题。

谢谢。 // 那么是相对于根吗？即与 /.

相同

@danielCrabbe 是的，它与 / 相同。但是，由于 URL 字符串的格式应该是 :// 我认为我们仍然需要 // 但它可能只使用 /

type: 'POST' 与 jsonp?这是没有意义的。 type 可能会被忽略。

@KevinB 解决方案仍然有效。但是，如果您确实有更好的答案，请发布或显示可以改进的地方。对于其他人来说，解释为什么 type 字段可能被忽略或不适用于 jsonp 数据类型比简单地发布一行说它没有意义更有用和更有教育意义

【参考方案2】：

通过选择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
           
        
    );
);

【讨论】：

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

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