Question

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

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

谢谢

Answer 1

您不需要API密钥，您只需将生成的标准mailchimp表单放入代码中（根据需要自定义外观），然后在表单“action”属性中将post?u=更改为{ {1}}然后在表单操作结束时附加post-json?u=以解决任何跨域问题。另外需要注意的是，提交表单时必须使用GET而不是POST。

默认情况下，您的表单标记看起来像这样：

&c=?

将其改为看起来像这样

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx" method="post" ... >

Mail Chimp将返回一个包含2个值的json对象：'result' - 这将指示请求是否成功（我只见过2个值，“error”和“success”）和'msg' - 描述结果的消息。

我用这个jQuery提交表单：

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="get" ... >

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

Answer 3

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

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

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

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!&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 文件作为PHP示例的一部分在Mailchimp网站上下载，并使用 API KEY 和 LIST ID 。您需要将其他可选字段添加到数组中。

从Mailchimp站点下载的

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

Answer 4

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

生成一个简单的mailchimp列表注册表单，将操作URL和方法（post）复制到自定义表单。同时将表单字段名称重命名为all capital（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...
          }
      }

Answer 5

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

Answer 6

至于这个日期（2017年2月），似乎mailchimp已经将类似于gbinflames建议的内容整合到他们自己的javascript生成表单中。

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

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

这很简单。谢谢MailChimp！

Answer 7

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

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

Answer 8

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

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

AJAX Mailchimp注册表单集成

8 个答案: