2016-07-05 131 views
0

我发现了一些很好的文章来指导我如何使用javascript发布JSON数据,这是最重要的一点:How can I use JQuery to post JSON data?。不幸的是,我仍然无法获得一个成功的职位。 这是我现在所拥有的,尽管我最终将需要用来自电子邮件输入字段的变量替换“[email protected]”。使用Javascript发布MailChimp JSON数据

<!-- ========== 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 protected]","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文件,我测试过该呼叫为卷曲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 protected]", 
"status": "subscribed" 
} 

有关我在做什么错的任何想法?感谢您的任何帮助/建议!

+0

如果你用某种开发工具运行这个/控制台可见你应该看到指示禁止跨域请求的错误。看看这里:http://stackoverflow.com/questions/21526408/mailchimp-subscribe-using-jquery-ajax#29443119为解释和可能的解决方法。 –

+0

感谢您的快速回复@SlipperyPete!您链接的文章提供了解释,并且在使用其建议的解决方法时,我现在可以获得成功的POST响应,但数据不会显示在Mail Chimp中。我也发现这篇文章:http://stackoverflow.com/questions/5188418/jquery-ajax-post-not-working-with-mailchimp似乎表明我需要编写一个服务器端的帖子来正确集成。似乎奇怪的是,发布电子邮件订阅MailChimp的RESTful API并不是一种更简单的方法......以进行更多的研究! – Chris

+0

这也是一篇关于如何解决这个问题的好文章,但它在PHP中,我的应用程序是asp.net:http://kovalent.co/blog/mailchimp-api-example/;我也试图完成这一点,而不必添加任何代码隐藏... – Chris

回答

0

我最终完成了想要使用更简单的方法。而不是尝试使用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>