AJAX Mailchimp 注册表单集成
Posted
技术标签:
【中文标题】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! Check your inbox or spam folder for a message containing a confirmation link.';
else
// An error ocurred, return error message
return '<b>Error:</b> ' . $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: 'emailofyouruser@gmail.com'
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 以使其尽可能精简。以上是关于AJAX Mailchimp 注册表单集成的主要内容，如果未能解决你的问题，请参考以下文章