使用 Javascript 发布 MailChimp JSON 数据

Question

我找到了一些很好的文章来指导我如何使用 javascript 发布 JSON 数据，这篇文章最中肯：How can I use JQuery to post JSON data?。不幸的是，我仍然无法获得成功的帖子。 这是我现在所拥有的，尽管我最终需要将“email@gmail.com”替换为电子邮件输入字段中的变量。

<!-- ========== START Mail Signup PopUp ========== -->
    <div id="popup-1" class="slickModal">
        <div class="window">
            <div class="wrap demo-1">
                <div class="title">SAVE 15% TODAY</div>
                <li>Exclusive Flash Sales</li>
                <li>Giveaways</li>
                <li>Free Shipping Coupons</li>
                <li>and more!</li>
                <br><br>
                <input type="email" value="" id="popupEmail" class="required email field" placeholder="Your email goes here">
                <input type="submit" value="submit" onclick="mcTest()">
<script>
function mcTest() {
     $.ajax({
        type: "POST",
        url: "https://us13.api.mailchimp.com/3.0/lists/123456/members/",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({"email_address": "email@gmail.com","status": "subscribed"}),
        success: function (data)
        {
            alert("success!") + data;
        },
        error: function()
        {
            alert("Cannot get data");
        }
    });
}
</script>
            </div>
            <div class="cta demo-1">
                <span class="icon"></span>
            </div>
        </div>  
    </div>
<!-- ========== END Mail Signup PopUp ========== -->

我不断收到错误“无法获取数据”错误弹出窗口。我正在捆绑并提供 json2.js 文件以使 stringify 函数工作，并且我已经将调用作为 cURL cmd 进行了测试，它也可以工作：

curl --request POST --url "https://us13.api.mailchimp.com/3.0/lists/123456/members/" --user "chris:123456789123456789-us13" --header "content-type: application/json" --data @C:\curl\mc.txt

这是 mc.txt 文件的内容：

{
"email_address": "email@gmail.com",
"status": "subscribed"
}

对我做错了什么有什么想法吗？感谢您的任何帮助/建议！

Answer 1

我最终用一种更简单的方法实现了我想要的。我没有尝试使用 ajax json 提交，而是使用了他们的嵌入式注册表单，为 asp.net 调整了它，如下所述：http://kb.mailchimp.com/lists/signup-forms/troubleshooting-the-embedded-signup-form。它不像我想要的那样灵活和可重新部署，但至少我可以让人们现在订阅，而不必调用他们疯狂的巨大 js 文件......我将其标记为已回答，但如果有人想添加/评论以更好地处理此问题，js/ajax 解决方案可以重新用于其他 Mail Chimp 集成点。这是我的最终弹出表单代码：

<div id="popup-1" class="slickModal">
    <div class="window">
        <div class="wrap demo-1">
            <div class="title">SAVE TODAY</div>
            <br><br>
        <div id="mc_embed_signup" class="newsletter">
            <div id="mc_embed_signup_scroll">
                <div class="mc-field-group">
                    <label for="mce-EMAIL">Sign up for special offers!</label>
                    <input type="email" value="" name="EMAIL" class="required email field" id="mce-EMAIL">
                </div>
                <div id="mce-responses" class="clear">
                    <div class="response" id="mce-error-response" style="display:none"></div>
                    <div class="response" id="mce-success-response" style="display:none"></div>
                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups -->
                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_af7b9e93e6d171c05f91e4e51_5ab805c384" tabindex="-1" value=""></div>
                <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                <script>
                $("#mc-embedded-subscribe").click(function(){this.form.action="http://mailchimpaccountname.us13.list-manage.com/subscribe/post?u=abc123abc123abc123abc1234&amp;id=1234567890",this.form.submit()});
                </script>
            </div>
        </div>
        </div>
        <div class="cta demo-1">
            <span class="icon"></span>
        </div>
    </div>  
</div>

Answer 2

关于Mailchimp的JSON POST请求，我们需要序列化我们的表单数据。

我们想要获取所有表单字段数据并从中创建一个键/值对的查询字符串。例如，FNAME=Freddie%20Chimp&EMAIL=freddie@mailchimp.com。

1. 你可以用 jQuery 做到这一点
2. 使用`encodeURIComponent()

encodeURIComponent()

encodeURIComponent() 函数通过将特定字符的每个实例替换为表示字符的 UTF-8 编码的一个、两个、三个或四个转义序列来对统一资源标识符 (URI) 组件进行编码（将只有四个转义由两个“代理”字符组成的字符序列）。

一个例子如下：

假设我们的event.target 是form 属性。

// Setup our serialized data
    var serialized = '';

    // Loop through each field in the form
    for (i = 0; i < form.elements.length; i++) {

        var field = form.elements[i];

        // Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
        if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;

        // Convert field data to a query string
        if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
            serialized += '&' + encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
        }
    }

    return serialized;

参考资料：

• AJAX Mailchimp signup form integration
• form serialize javascript (no framework), compatible to IE10
• Validating the MailChimp Subscribe Form
• MDN web docs - With encodeURIComponent()