2016-07-05 92 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>