MailChimp Ajax 提交不会将订阅者添加到列表中

Posted 2023-03-24

【中文标题】MailChimp Ajax 提交不会将订阅者添加到列表中

【英文标题】：MailChimp Ajax submission doesn't add subscribers to list

【发布时间】：2016-06-23 15:46:03

【问题描述】：

我试图让用户使用 ajax 订阅我的 MailChimp 列表，使用 this solution。表单的行为有效（即错误消息正确显示，“提交...”和确认消息也是如此）。但是，我的 MailChimp 列表中实际上并没有添加任何订阅者。我相信这对你们中的许多人来说非常简单，但我似乎找不到问题所在。任何人？谢谢！

    $(document).ready(function()
        ajaxMailChimpForm($("#subscribe-form"), $("#subscribe-result"));
        // Turn the given MailChimp form into an ajax version of it.
        // If resultElement is given, the subscribe result is set as html to
        // that element.
        function ajaxMailChimpForm($form, $resultElement)
            // Hijack the submission. We'll submit the form manually.
            $form.submit(function(e) 
                e.preventDefault();
                if (!isValidEmail($form)) 
                    var error =  "Please make sure you've inserted a valid e-mail address!";
                  $resultElement.html(error);
                 else 
                    $resultElement.html("Subscribing...");
                    submitSubscribeForm($form, $resultElement);
                
            );
        
        // Validate the email address in the form
        function isValidEmail($form) 
            // If email is empty, show error message.
            // contains just one @
            var email = $form.find("input[type='email']").val();
            if (!email || !email.length) 
                return false;
             else if (email.indexOf("@") == -1) 
                return false;
            
            return true;
        
        // Submit the form with an ajax/jsonp request.
        // Based on http://***.com/a/15120409/215821
        function submitSubscribeForm($form, $resultElement) 
            $.ajax(
                type: "GET",
                url: $form.attr("action"),
                data: $form.serialize(),
                cache: false,
                dataType: "jsonp",
                jsonp: "c", // trigger MailChimp to return a JSONP response
                contentType: "application/json; charset=utf-8",
                error: function(error)
                    // According to jquery docs, this is never called for cross-domain JSONP requests
                ,
                success: function(data)
                    if (data.result != "success") 
                        var message = data.msg || "Oops! An error is preventing you from subscribing.";
                        if (data.msg && data.msg.indexOf("already subscribed") >= 0) 
                            message = "It seems you have already subscribed. Thank you!";
                           
                        
                        $resultElement.html(message);
                     else 
                       
                        $resultElement.html("Voilà! Thank you!");
                    
                
            );
        
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="subscribe-form" action="https://7rueparadis.us12.list-manage.com/subscribe/post-json?u=833b25cd1f45aa6d1901482a1&amp;id=f3e732140d" method="get" id="mc-embedded-subscribe-form" name="subscribe" target="_blank">
            <label for="Email" class="newsletter__label hidden-label">Newsletter form</label>
            <div class="input-group">
              <input type="email" value="" placeholder="Enter your email address" name="EMAIL" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
              <span class="input-group-btn">
                <button type="submit" class="btn newsletter__submit" name="mc-embedded-subscribe" id="subscribe-button">
                  <span class="newsletter__submit-text--large">Subscribe</span>
                  <span class="newsletter__submit-text--small"> <span class="icon icon-arrow-right" aria-hidden="true"></span></span>
                </button>
              </span>
            </div>
                     <div class="grid__item one-whole secrets-copy2">
            <p class="newsletterbody" id="subscribe-result">
                       </p></div>
          </form>

【问题讨论】：

您用于 Mailchimp 表单的 URL 似乎不再有效，并且 ajax 请求返回错误并转到实际使用的 error 方法，而不是您的评论代码。

【参考方案1】：

订阅者不会直接添加到列表中，他们首先必须确认他们想要在列表中。如果您希望绕过此双重选择加入，则需要使用 API。