Question

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

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

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接口。

更改网址以使用/ subscribe / post-json？版本以及追加＆amp; c =？到最后。更新网址后，您还需要将JSON哈希中的 dataType 修改为 jsonp

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

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

Answer 2

选择列表＆gt;获取列表的网址注册表格＆gt; （经典形式）。您可以在'复制/粘贴到您的网站'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
           }
        }
    });
});

Mailchimp使用jQuery AJAX订阅？

2 个答案: