AJAX Mailchimpregistry单集成

有没有办法将mailchimp简单(一个电子邮件input)与AJAX集成,所以没有页面刷新,也没有redirect到默认的mailchimp页面。

此解决scheme不工作jQuery Ajax POST不与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" ... > 

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... } } }); } 

根据gbinflames的回答,我保留了POST和URL,这样表单会继续为JSclosures的人工作。

 <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()更改types和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; }); 

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

以下是使用PHP的这个答案的更新版本:

PHP文件被“保护”在服务器上,用户永远不会看到它们,但jQuery仍然可以访问和使用。

1)在这里下载PHP 5的jQuery示例…

downloads/mcapi-simple-subscribe-jquery.html

如果您只有PHP 4,只需下载MCAPI的1.2版本,并replace上面相应的MCAPI.class.php文件。

downloads/mcapi-simple-subscribe-jquery.html

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

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

这里是我的store-address.php文件的样子,我也收集名字,姓氏和电子邮件types:

 <?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)创build你的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文件作为PHP示例的一部分下载到Mailchimp站点,并使用您的API KEYLIST ID进行修改 。 您需要将其他可选字段添加到数组中。

  • 从Mailchimp站点下载的MCAPI.class.php文件(PHP 5版本1.3或PHP 4版本1.2)。 将其放在与store-address.php相同的目录中,或者必须更新store-address.php中的urlpath,以便find它。

根据gbinflames的回答,这是对我有用的:

生成一个简单的mailchimp列表registry单,将操作URL和方法(post)复制到您的自定义表单。 还要将您的表单字段名称重命名为全部大写(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... } } 

使用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); } }); }) 

另一方面,在AngularJS中有一些包(在AJAX WEB中)是有帮助的:

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

至于这个date(2017年2月),似乎mailchimp已经将类似于gbinflamesbuild议的东西整合到他们自己的javascript生成的表单中。

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

你现在要做的只是将生成的表单从embedded菜单粘贴到你的html页面,而不是修改或添加任何其他的代码。

这很简单。 感谢MailChimp!