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。

您可以使用jQuery
使用`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;

使用Javascript发布MailChimp JSON数据

2 个答案:

encodeURIComponent（）

参考文献：