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 KEY和LIST 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！

    Interesting Posts

    在Outlook中如何使通讯背景图像？