javascript - AJAX Mailchimp 注册表单集成

Question

有什么方法可以将 mailchimp simple(一个电子邮件输入)与 AJAX 集成，这样就不会刷新页面，也不会重定向到默认的 mailchimp 页面。

此解决方案无效 jQuery Ajax POST not working with MailChimp

谢谢

Answer 1

您不需要 API key ，您所要做的就是将标准 mailchimp 生成的表单放入您的代码中(根据需要自定义外观)并在表单中更改“action”属性 post?u= 到 post-json?u=，然后在表单操作的末尾附加 &c=? 以解决任何跨域问题。另外请务必注意，当您提交表单时，您必须使用 GET 而不是 POST。

默认情况下，您的表单标签将如下所示:

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx" method="post" ... >

让它看起来像这样

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="get" ... >

Mail Chimp 将返回一个包含 2 个值的 json 对象:'result' - 这将指示请求是否成功(我只见过 2 个值，“error”和“success”)和“msg” - 描述结果的消息。

我用这个 jQuery 提交我的表单:

$(document).ready( function () {
    // I only have one form on the page but you can be more specific if need be.
    var $form = $('form');

    if ( $form.length > 0 ) {
        $('form input[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
            // validate_input() is a validation function I wrote, you'll have to substitute this with your own.
            if ( validate_input($form) ) { register($form); }
        });
    }
});

function register($form) {
    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),
        cache       : false,
        dataType    : 'json',
        contentType: "application/json; charset=utf-8",
        error       : function(err) { alert("Could not connect to the registration server. Please try again later."); },
        success     : function(data) {
            if (data.result != "success") {
                // Something went wrong, do something to notify the user. maybe alert(data.msg);
            } else {
                // It worked, carry on...
            }
        }
    });
}