有什么方法可以将mailchimp简单(一个电子邮件输入)与AJAX集成,因此没有页面刷新,也没有重定向到默认的mailchimp页面。AJAX Mailchimp注册表单集成
此解决方案不起作用jQuery Ajax POST not working with MailChimp
感谢
有什么方法可以将mailchimp简单(一个电子邮件输入)与AJAX集成,因此没有页面刷新,也没有重定向到默认的mailchimp页面。AJAX Mailchimp注册表单集成
此解决方案不起作用jQuery Ajax POST not working with MailChimp
感谢
你不需要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" ... >
邮件黑猩猩会返回一个包含2个值的JSON对象:“结果” - 这将表明请求是否成功(我只见过2个值,“错误”和“成功”)和'味精' - 描述结果的消息。
提交我的形式有位的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...
}
}
});
}
您应该以确保您的MailChimp帐户使用服务器端代码。
以下是this answer which uses PHP的更新版本:
的PHP文件在服务器上的“安全”,其中用户永远看不到它们尚未jQuery的仍然可以访问&使用。
1)点击此处下载PHP 5 jQuery的例子...
http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip
如果你只有PHP 4,只需下载MCAPI的1.2版本,并更换相应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,外观和选项是无止境的。
商店address.php文件下载为对Mailchimp网站PHP例子的一部分,并与您API KEY和列表ID修改。您需要将其他可选字段添加到数组中。
MCAPI.class.php从Mailchimp站点下载的文件(PHP 5版本1.3或PHP 4版本1.2)。将它放在与store-address.php相同的目录中,或者您必须在store-address.php内更新url路径,以便它能够找到它。
如果您只是想将注册表单添加到您的网站并通过AJAX提交,那么@ gbinflames的答案就有效。只是自己试了一下。 –
不,没有*必须*。 – Nowaker
废话,我得说 - 我前段时间在一个网站上实施了@ skube的答案,后来又在网站范围内添加了https。现在才发现它不适用于mailchimp http AJAX调用。强烈建议如果您的网站可能需要或考虑使用SSL,请立即使用此方法。 – squarecandy
根据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 repsonses。
$('.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;
});
我喜欢它,很好的工作。我将不得不调整我的实施。 – gbinflames
基于gbinflames的回答,这是对我工作:
生成一个简单的mailchimp列表注册形式,动作URL和方法(后)复制到您的自定义窗体。同时重命名表单字段名称的所有资金(如原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...
}
}
使用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);
}
});
})
至于这个日期(二月2017),似乎mailchimp整合了类似于gbinflames建议到他们自己的JavaScript生成的表单的东西。
您现在不需要任何进一步干预,因为mailchimp会在启用javascript时将表单转换为提交的ajax。
您现在需要做的只是将生成的表单从嵌入菜单粘贴到您的html页面中,而不是修改或添加任何其他代码。
这很简单。感谢MailChimp!
它会真的帮助,如果你可以添加一些文章链接/博客文章做同样的 – gonephishing
我已经添加Mailchimp嵌入代码到我的HTML页面,但Ajax不会自动按上面的建议工作。我被重定向到另一个页面。我怎样才能使这项工作没有重定向? – Petra
所有的谎言。链接到一些文件,这将有助于确实 –
在另一方面,在AngularJS一些软件包这是有帮助的(在AJAX的WEB):
在jQuery上类似的东西https://github.com/ddimitrioglo/jquery-mailchimp –
什么不起作用? – JamesHalsall
提交表单后重定向到mailchimp“确认”页面。 – alexndm
您的解决方案存在巨大的安全漏洞,因此API密钥应该被视为私有,因为它提供了对您的MailChimp帐户的完全访问权限。 #justsaying – 2012-01-30 17:34:12