AJAX Mailchimp 注册表单集成

5 浏览
0 Comments

AJAX Mailchimp 注册表单集成

有没有办法使用AJAX将mailchimp简单（一个电子邮件输入框）集成起来，以便不刷新页面，也不重定向到默认的mailchimp页面。\n这个解决方案不起作用，详情见jQuery Ajax POST not working with MailChimp\n谢谢。

0

3 答案

0 Comments

问题的出现原因：在现代堆栈中，使用AJAX将Mailchimp注册表单集成到网站时，可能会遇到以下问题：

- 在Firefox浏览器中，由于其增强保护功能，可能会尝试阻止请求的发送。

解决方法：为了解决上述问题，可以采取以下步骤：

1. 导入所需的依赖包：

import jsonp from 'jsonp';
import queryString from 'query-string';

2. 创建一个包含表单数据的对象（formData）：

// formData being an object with your form data like:
// { EMAIL: 'emailofyouruser.com' }

3. 使用jsonp()函数发送请求到Mailchimp的URL，并附加表单数据：

jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

4. （可选）如果Firefox浏览器阻止请求的发送，可以通过以下方式解决：

- 导入自定义的编码器函数queryString，替代导入的'query-string'包：

function queryString(data) { 
  return Object.keys(data).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`).join('&');
}

- 在发送请求时，使用自定义的编码器函数queryString()代替queryString.stringify()方法：

jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString(formData)}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

5. （可选）如果需要将表单数据从表单中提取并转换为对象，可以使用form-serialize库中的serialize()函数：

- 导入所需的依赖包：

import serialize from 'form-serialize';

- 在事件处理程序中，使用serialize()函数将表单数据转换为对象：

let formData = serialize(e.target);

- 将转换后的对象作为字符串传递给请求的URL：

jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${formData}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

注意：根据2021年的最新情况，不再需要使用queryString.stringify()方法。

通过以上步骤，可以解决在现代堆栈中使用AJAX将Mailchimp注册表单集成到网站时可能遇到的问题。

0
0 Comments

对于这个问题，原因是作者希望即使在没有启用JavaScript的情况下，表单仍然可以正常工作。因此，作者保留了原始的POST和URL设置。但是，作者想要处理JSON响应，所以使用了jQuery的.submit()方法来更改类型和URL。解决方法是使用jQuery的.ajax()方法来发送异步请求，并在成功和失败的情况下执行相应的操作。如果成功，作者隐藏表单并显示感谢信息；如果失败，作者解析错误消息并显示相应的提示。

0
0 Comments

AJAX Mailchimp表单集成问题的原因是，当使用标准的Mailchimp生成的表单时，提交表单时会遇到跨域问题，导致无法成功订阅。

解决方法是将表单的"action"属性中的post?u=改为post-json?u=，并在表单的action末尾添加&c=?来解决跨域问题。另外，需要注意的是，提交表单时必须使用GET方法而不是POST方法。

具体的解决代码如下所示：

$(document).ready( function () {
    var $form = $('form');
    if ( $form.length > 0 ) {
        $('form input[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
            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...
            }
        }
    });
}

这种方法可以使用jQuery的ajax功能来向Mailchimp服务器发送请求，并根据返回的json对象中的'result'值判断请求是否成功。

另外，需要注意的是，邮件表单字段的名称必须为"EMAIL"，以便Mailchimp能够正确处理。

此外，还可以使用JSONP来解决跨域问题。只需按照上述方法将表单的action中的post-json改为post，然后在jQuery的ajax调用中设置dataType: 'jsonp'和jsonp: 'c'。

需要注意的是，这种方法默认使用GET请求而不是POST请求。

通过修改Mailchimp生成的表单的action属性，并使用jQuery的ajax功能，可以解决使用AJAX集成Mailchimp表单时遇到的跨域问题，并实现订阅功能。

0