AJAX Mailchimp 注册表单集成

Posted 2023-02-22

【中文标题】AJAX Mailchimp 注册表单集成

【英文标题】：AJAX Mailchimp signup form integration

【发布时间】：2012-01-15 13:51:23

【问题描述】：

有没有办法将 mailchimp simple（一个电子邮件输入）与 AJAX 集成，所以没有页面刷新，也没有重定向到默认 mailchimp 页面。

此解决方案不起作用jQuery Ajax POST not working with MailChimp

谢谢

【问题讨论】：

提交表单后重定向到mailchimp“确认”页面。

您的解决方案存在巨大的安全漏洞，API 密钥应被视为私有密钥，因为它确实提供了对您 MailChimp 帐户的完全访问权限。 #justsaying

该解决方案暴露了您的 mailchimp API，这不是一个好主意

mailchimp 网站上的默认 html 嵌入选项是否也暴露了您的 api 密钥？它不能比那个解决方案更好或更糟。

使用这个 jquery 插件：github.com/scdoshi/jquery-ajaxchimp

【参考方案1】：

您不需要 API 密钥，只需将标准 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...
            
        
    );

【讨论】：

我做了一个使用这种方法的jquery插件：github.com/scdoshi/jquery-ajaxchimp

您也可以使用 JSONP。按照说明使用post-json。如果您在表单操作 url 中有 &c=，请删除它。使用 dataType: 'jsonp' 和 jsonp: 'c' 进行 jQuery ajax 调用。

请注意，电子邮件表单字段必须具有 name="EMAIL" 以便 mailchimp 处理

仅供参考，以防万一有人遇到问题，电子邮件参数的名称应为EMAIL（全部大写）。否则，您将收到一条错误消息，指出电子邮件地址为空。

自编写此答案以来，MailChimp 是否已禁用此访问 API 的方法？我在文档中没有看到任何迹象表明没有 API 密钥的 GET/POST 可以为用户订阅列表。

【参考方案2】：

根据 gbinflames 的回答，我保留了 POST 和 URL，以便表单可以继续为那些关闭 JS 的人工作。

<form class="myform" action="http://XXXXXXXXXlist-manage2.com/subscribe/post" method="POST">
  <input type="hidden" name="u" value="XXXXXXXXXXXXXXXX">
  <input type="hidden" name="id" value="XXXXXXXXX">
  <input class="input" type="text" value="" name="MERGE1" placeholder="First Name" required>
  <input type="submit" value="Send" name="submit" id="mc-embedded-subscribe">
</form>

然后，使用 jQuery 的 .submit() 更改类型和 URL 来处理 JSON 响应。

$('.myform').submit(function(e) 
  var $this = $(this);
  $.ajax(
      type: "GET", // GET & url for json slightly different
      url: "http://XXXXXXXX.list-manage2.com/subscribe/post-json?c=?",
      data: $this.serialize(),
      dataType    : 'json',
      contentType: "application/json; charset=utf-8",
      error       : function(err)  alert("Could not connect to the registration server."); ,
      success     : function(data) 
          if (data.result != "success") 
              // Something went wrong, parse data.msg string and display message
           else 
              // It worked, so hide form and display thank-you message.
          
      
  );
  return false;
);

【参考方案3】：

您应该使用服务器端代码来保护您的 MailChimp 帐户。

以下是this answer which uses php的更新版本：

PHP 文件在服务器上是“安全的”，用户永远不会看到它们，但 jQuery 仍然可以访问和使用。

1) 在此处下载 PHP 5 jQuery 示例...

http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip

如果您只有 PHP 4，只需下载 1.2 版的 MCAPI 并替换上面对应的MCAPI.class.php 文件。

http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip

2) 按照自述文件中的说明，将您的 API 密钥和列表 ID 添加到 store-address.php 文件的适当位置。

3) 您可能还想收集用户的姓名和/或其他信息。您必须使用相应的合并变量将数组添加到 store-address.php 文件。

这是我的store-address.php 文件的样子，其中我还收集了名字、姓氏和电子邮件类型：

<?php

function storeAddress()

    require_once('MCAPI.class.php');  // same directory as store-address.php

    // grab an API Key from http://admin.mailchimp.com/account/api/
    $api = new MCAPI('123456789-us2');

    $merge_vars = Array( 
        'EMAIL' => $_GET['email'],
        'FNAME' => $_GET['fname'], 
        'LNAME' => $_GET['lname']
    );

    // grab your List's Unique Id by going to http://admin.mailchimp.com/lists/
    // Click the "settings" link for the list - the Unique Id is at the bottom of that page. 
    $list_id = "123456a";

    if($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype']) === true) 
        // It worked!   
        return 'Success!&nbsp; Check your inbox or spam folder for a message containing a confirmation link.';
    else
        // An error ocurred, return error message   
        return '<b>Error:</b>&nbsp; ' . $api->errorMessage;
    



// If being called via ajax, autorun the function
if($_GET['ajax']) echo storeAddress(); 
?>

4) 创建您的 HTML/CSS/jQuery 表单。它不需要在 PHP 页面上。

这是我的index.html 文件的样子：

<form id="signup" action="index.html" method="get">
    <input type="hidden" name="ajax" value="true" />
    First Name: <input type="text" name="fname" id="fname" />
    Last Name: <input type="text" name="lname" id="lname" />
    email Address (required): <input type="email" name="email" id="email" />
    HTML: <input type="radio" name="emailtype" value="html" checked="checked" />
    Text: <input type="radio" name="emailtype" value="text" />
    <input type="submit" id="SendButton" name="submit" value="Submit" />
</form>
<div id="message"></div>

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() 
    $('#signup').submit(function() 
        $("#message").html("<span class='error'>Adding your email address...</span>");
        $.ajax(
            url: 'inc/store-address.php', // proper url to your "store-address.php" file
            data: $('#signup').serialize(),
            success: function(msg) 
                $('#message').html(msg);
            
        );
        return false;
    );
);
</script>

需要的部分...

index.html 构造如上或类似。使用 jQuery，外观和选项是无穷无尽的。

store-address.php 文件在 Mailchimp 网站上作为 PHP 示例的一部分下载，并使用您的 API KEY 和 LIST ID进行了修改>。您需要将其他可选字段添加到数组中。

MCAPI.class.php 文件从 Mailchimp 站点下载（PHP 5 版本 1.3 或 PHP 4 版本 1.2）。将它放在与您的 store-address.php 相同的目录中，或者您必须更新 store-address.php 中的 url 路径以便它可以找到它。

【讨论】：

如果您只是想向您的网站添加一个注册表单并通过 AJAX 提交，@gbinflames 的答案很有效。自己试过了。

不，没有必须。

废话，我得说 - 我不久前在一个网站上实施了@skube 的答案，然后又添加了全站范围的 https。现在才发现它不适用于 mailchimp http AJAX 调用。如果您的网站可能需要或考虑使用 SSL，强烈建议您立即使用此方法。

【参考方案4】：

对于在现代堆栈上寻找解决方案的任何人：

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

// formData being an object with your form data like:
//  EMAIL: '[e-mail]' 

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

【讨论】：

这很有效，尽管 Firefox 可能会尝试通过其增强保护来阻止请求离开。您还可以通过提供自己的编码器来跳过导入“查询字符串”包，如下所示：function queryString(data) return Object.keys(data).map((key) => `$encodeURIComponent(key)=$encodeURIComponent(data[key])`).join('&'); （然后跳过.stringify 方法）

虽然暗示，但通过包含以下内容将这个答案提升到一个新的水平：import serialize from form-serialize'; let formData = serialize(e.target); 将数据从表单中取出并放入对象中，并且仅将对象作为字符串传递给 URL @987654325 @queryString.stringify() - 自 2021 年起不再需要

【参考方案5】：

根据 gbinflames 的回答，这对我有用：

生成一个简单的 mailchimp 列表注册表单，将操作 URL 和方法（发布）复制到您的自定义表单。还将您的表单字段名称重命名为全部大写（ name='EMAIL' 与原始 mailchimp 代码一样，EMAIL,FNAME,LNAME,... ），然后使用：

      $form=$('#your-subscribe-form'); // use any lookup method at your convenience

      $.ajax(
      type: $form.attr('method'),
      url: $form.attr('action').replace('/post?', '/post-json?').concat('&c=?'),
      data: $form.serialize(),
      timeout: 5000, // Set timeout value, 5 seconds
      cache       : false,
      dataType    : 'jsonp',
      contentType: "application/json; charset=utf-8",
      error       : function(err)  // put user friendly connection error message  ,
      success     : function(data) 
          if (data.result != "success") 
              // mailchimp returned error, check data.msg
           else 
              // It worked, carry on...
          
      

【参考方案6】：

就这个日期（2017 年 2 月）而言，mailchimp 似乎已将类似于 gbinflames 建议的内容集成到他们自己的 javascript 生成形式中。

您现在不需要任何进一步的干预，因为启用 javascript 后，mailchimp 会将表单转换为 ajax 提交的表单。

您现在需要做的只是将嵌入菜单中生成的表单粘贴到您的 html 页面中，而不是修改或添加任何其他代码。

这很简单。谢谢 MailChimp！

【讨论】：

如果您可以添加一些文章链接/博客文章来做同样的事情，这将非常有帮助

我已将 Mailchimp 嵌入代码添加到我的 html 页面中，但 Ajax 不会按照上面的建议自动工作。我被重定向到另一个页面。如何在没有重定向的情况下完成这项工作？

在 MailChimp 管理员中转到您的列表 -> 注册表单 -> 嵌入式表单 -> 经典。您会看到代码 sn-p 中包含一些 JS。这将启用表单验证和 AJAX 提交。

使用 mailchimp 代码 - 我如何将自定义操作插入 ajax 成功？ [喜欢隐藏表格]

@Masiorama 我选择删除 mc-validate 脚本，因为它还包含一个旧 jquery，而且太大且易受攻击。所以只需进行 html 验证并使用 ajax 提交，就像在 ***.com/a/15120409/744690

【参考方案7】：

使用jquery.ajaxchimp 插件来实现。这很容易！

<form method="post" action="YOUR_SUBSCRIBE_URL_HERE">
  <input type="text" name="EMAIL" placeholder="e-mail address" />
  <input type="submit" name="subscribe" value="subscribe!" />        
  <p class="result"></p>
</form>

JavaScript：

$(function() 
  $('form').ajaxChimp(
    callback: function(response) 
      $('form .result').text(response.msg);
    
  );
)

【参考方案8】：

另一方面，AngularJS 中有一些有用的包（在 AJAX WEB 中）：

https://github.com/cgarnier/angular-mailchimp-subscribe

【讨论】：

在 jQuery github.com/ddimitrioglo/jquery-mailchimp987654322@ 之上类似的东西

【参考方案9】：

我无法使用 fetch 来解决此问题，因此必须在此处使用 GET 组合一些答案，并将表单输入解析为 URL 的查询字符串。输入的name 也没有必要为 EMAIL 但我想它使它更易读并且不会破坏代码（在这个简单的情况下。如果您还有其他表单字段）。

这是我的代码；

<form action="https://me.usxx.list-manage.com/subscribe/post-json?" id="signup" method="GET">
  <input type="hidden" name="u" value="xxxxxxxxxxxxxxxxxx"/>
  <input type="hidden" name="id" value="xxxxxxxxx"/>
  <input type="hidden" name="c" value="?"/>
  <input name="EMAIL" type="text" />
</form>

// Form submission handler
const formData = new FormData(signup);

fetch(signup.action + new URLSearchParams(formData).toString(), 
  mode: 'no-cors',
  method: signup.method,
)
.then((res) => 
  // Success
)
.catch((e) => 
  // Error
)

你可以让它与...无关的js友好

<form action="https://me.usxx.list-manage.com/subscribe/post" id="signup">

fetch(signup.action + '-json?' + new URLSearchParams(formData).toString(), 

为了拯救那些像我一样无谓地摸索的人，您必须在 Mailchimp 中为受众创建一个注册表单，通过访问 该 页面，您可以获得您的 u 值和 @987654328 @ 以及 action。也许这只是我，但我认为这并不明确。

【讨论】：

为了跟进更多实验，使用 Fetch，我们无法访问返回的 JSON 对象，因此如果用户注册两次，我们无法告诉他们更新他们的个人资料（如 mailchimp会）我们也不能警告他们任何消息，例如我在测试“太多注册”期间收到的消息。这些错误在fetch 眼中是成功的，所以坦率地说我会避免使用它。我只是不想将另一个库下载到我的站点，但设法找到了一个独立的 AJAX 以使其尽可能精简。