90
有什麼方法可以將mailchimp簡單（一個電子郵件輸入）與AJAX集成，因此沒有頁面刷新，也沒有重定向到默認的mailchimp頁面。AJAX Mailchimp註冊表單集成
此解決方案不起作用jQuery Ajax POST not working with MailChimp
感謝
A
回答
185
你不需要API密鑰，所有你需要做的就是撲通標準mailchimp生成的表單到你的代碼（自定義外觀需要），並以「action」屬性更改post?u=至post-json?u=，然後在表單操作結尾附加&c=?以解決任何跨域問題。另外需要注意的是，當您提交表單時，您必須使用GET而不是POST。
你的表單標籤會是這個樣子默認：
<form action="http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx" method="post" ... >
改變它看起來像這樣
<form action="http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="get" ... >
郵件黑猩猩會返回一個包含2個值的JSON對象：「結果」 - 這將表明請求是否成功（我只見過2個值，「錯誤」和「成功」）和'味精' - 描述結果的消息。
提交我的形式有位的jQuery：
$(document).ready(function() {
// I only have one form on the page but you can be more specific if need be.
var $form = $('form');
if ($form.length > 0) {
$('form input[type="submit"]').bind('click', function (event) {
if (event) event.preventDefault();
// validate_input() is a validation function I wrote, you'll have to substitute this with your own.
if (validate_input($form)) { register($form); }
});
}
});
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
// Something went wrong, do something to notify the user. maybe alert(data.msg);
} else {
// It worked, carry on...
}
}
});
}
18
您應該以確保您的MailChimp帳戶使用服務器端代碼。
以下是this answer which uses PHP的更新版本：
的PHP文件在服務器上的「安全」，其中用戶永遠看不到它們尚未jQuery的仍然可以訪問&使用。
1）點擊此處下載PHP 5 jQuery的例子...
http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip
如果你只有PHP 4，只需下載MCAPI的1.2版本，並更換相應MCAPI.class.php文件之上。
http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip
2）通過在適當位置增加您的API密鑰和列表ID爲store-address.php文件按照自述文件中的方向。
3）您可能還想收集用戶的姓名和/或其他信息。您必須使用相應的合併變量將數組添加到store-address.php文件中。
這裏是我的store-address.php文件的樣子，我也收集了姓，名和電子郵件類型：
<?php
function storeAddress(){
require_once('MCAPI.class.php'); // same directory as store-address.php
// grab an API Key from http://admin.mailchimp.com/account/api/
$api = new MCAPI('123456789-us2');
$merge_vars = Array(
'EMAIL' => $_GET['email'],
'FNAME' => $_GET['fname'],
'LNAME' => $_GET['lname']
);
// grab your List's Unique Id by going to http://admin.mailchimp.com/lists/
// Click the "settings" link for the list - the Unique Id is at the bottom of that page.
$list_id = "123456a";
if($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype']) === true) {
// It worked!
return 'Success! Check your inbox or spam folder for a message containing a confirmation link.';
}else{
// An error ocurred, return error message
return '<b>Error:</b> ' . $api->errorMessage;
}
}
// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>
4）創建你的HTML/CSS/jQuery的形式。它不需要在PHP頁面上。
這裏是一樣的東西就是我index.html文件看起來像：
<form id="signup" action="index.html" method="get">
<input type="hidden" name="ajax" value="true" />
First Name: <input type="text" name="fname" id="fname" />
Last Name: <input type="text" name="lname" id="lname" />
email Address (required): <input type="email" name="email" id="email" />
HTML: <input type="radio" name="emailtype" value="html" checked="checked" />
Text: <input type="radio" name="emailtype" value="text" />
<input type="submit" id="SendButton" name="submit" value="Submit" />
</form>
<div id="message"></div>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#signup').submit(function() {
$("#message").html("<span class='error'>Adding your email address...</span>");
$.ajax({
url: 'inc/store-address.php', // proper url to your "store-address.php" file
data: $('#signup').serialize(),
success: function(msg) {
$('#message').html(msg);
}
});
return false;
});
});
</script>
必需的程序...
的index.html如上構成或相似。使用jQuery，外觀和選項是無止境的。
商店address.php文件下載爲對Mailchimp網站PHP例子的一部分，並與您API KEY和列表ID修改。您需要將其他可選字段添加到數組中。
MCAPI.class.php從Mailchimp站點下載的文件（PHP 5版本1.3或PHP 4版本1.2）。將它放在與store-address.php相同的目錄中，或者您必須在store-address.php內更新url路徑，以便它能夠找到它。
+2
如果您只是想將註冊表單添加到您的網站並通過AJAX提交，那麼@ gbinflames的答案就有效。只是自己試了一下。 –
+1
不，沒有*必須*。 – Nowaker
+0
廢話，我得說 - 我前段時間在一個網站上實施了@ skube的答案，後來又在網站範圍內添加了https。現在才發現它不適用於mailchimp http AJAX調用。強烈建議如果您的網站可能需要或考慮使用SSL，請立即使用此方法。 – squarecandy
24
根據gbinflames的回答，我保留了POST和URL，以便表單繼續爲JS關閉的人工作。
<form class="myform" action="http://XXXXXXXXXlist-manage2.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="XXXXXXXXXXXXXXXX">
<input type="hidden" name="id" value="XXXXXXXXX">
<input class="input" type="text" value="" name="MERGE1" placeholder="First Name" required>
<input type="submit" value="Send" name="submit" id="mc-embedded-subscribe">
</form>
然後，使用jQuery的.submit（）更改了類型和URL以處理JSON repsonses。
$('.myform').submit(function(e) {
var $this = $(this);
$.ajax({
type: "GET", // GET & url for json slightly different
url: "http://XXXXXXXX.list-manage2.com/subscribe/post-json?c=?",
data: $this.serialize(),
dataType : 'json',
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server."); },
success : function(data) {
if (data.result != "success") {
// Something went wrong, parse data.msg string and display message
} else {
// It worked, so hide form and display thank-you message.
}
}
});
return false;
});
+1
我喜歡它，很好的工作。我將不得不調整我的實施。 – gbinflames
4
基於gbinflames的回答，這是對我工作：
生成一個簡單的mailchimp列表註冊形式，動作URL和方法（後）複製到您的自定義窗體。同時重命名錶單字段名稱的所有資金（如原mailchimp代號= '電子郵件'，EMAIL，FNAME，LNAME，...），然後使用此：
$form=$('#your-subscribe-form'); // use any lookup method at your convenience
$.ajax({
type: $form.attr('method'),
url: $form.attr('action').replace('/post?', '/post-json?').concat('&c=?'),
data: $form.serialize(),
timeout: 5000, // Set timeout value, 5 seconds
cache : false,
dataType : 'jsonp',
contentType: "application/json; charset=utf-8",
error : function(err) { // put user friendly connection error message },
success : function(data) {
if (data.result != "success") {
// mailchimp returned error, check data.msg
} else {
// It worked, carry on...
}
}
4
使用jquery.ajaxchimp插件來實現這一目標。這很容易！
<form method="post" action="YOUR_SUBSCRIBE_URL_HERE">
<input type="text" name="EMAIL" placeholder="e-mail address" />
<input type="submit" name="subscribe" value="subscribe!" />
<p class="result"></p>
</form>
的JavaScript：
$(function() {
$('form').ajaxChimp({
callback: function(response) {
$('form .result').text(response.msg);
}
});
})
0
至於這個日期（二月2017），似乎mailchimp整合了類似於gbinflames建議到他們自己的JavaScript生成的表單的東西。
您現在不需要任何進一步干預，因爲mailchimp會在啓用javascript時將表單轉換爲提交的ajax。
您現在需要做的只是將生成的表單從嵌入菜單粘貼到您的html頁面中，而不是修改或添加任何其他代碼。
這很簡單。感謝MailChimp！
+3
它會真的幫助，如果你可以添加一些文章鏈接/博客文章做同樣的 – gonephishing
+0
我已經添加Mailchimp嵌入代碼到我的HTML頁面，但Ajax不會自動按上面的建議工作。我被重定向到另一個頁面。我怎樣才能使這項工作沒有重定向？ – Petra
+0
所有的謊言。鏈接到一些文件，這將有助於確實 –
0
在另一方面，在AngularJS一些軟件包這是有幫助的（在AJAX的WEB）：
+0
在jQuery上類似的東西https://github.com/ddimitrioglo/jquery-mailchimp –
相關問題
- 1. Mailchimp註冊表單與angular2
- 2. facebook註冊表集成
- 3. Mailchimp註冊成功淡入淡出
- 4. 在MailChimp註冊表中註冊更多列表
- 5. mailchimp註冊表格導致404
- 6. Python燒瓶Mailchimp註冊
- 7. CakePHP高度集成註冊表格
- 8. mailchimp php集成
- 9. Mailchimp - 使註冊表單中的興趣組成爲必填字段
- 10. Mailchimp註冊表單是行不通的訂閱按鈕
- 11. 如何在電子郵件註冊表單中實現mailchimp API？
- 12. 如何用這個mailchimp代碼創建一行註冊表單
- 13. Mailchimp嵌入式註冊表單不顯示驗證碼
- 14. 如何在Wordpress中添加Mailchimp註冊表單？
- 15. 如何將Mailchimp註冊表單div居中？
- 16. 域註冊表api集成在php
- 17. WSO2註冊表和Apache Synapse集成
- 18. PHP，用於註冊表單的AJAX
- 19. PHP AJAX註冊表單提交教程
- 20. AJAX表單POST Django的註冊1.0
- 21. OroCRM和Mailchimp集成
- 22. cakephp和mailchimp集成
- 23. 如何將Mailerlite API集成到我的註冊表單上？
- 24. Druapal Ajax註冊表格
- 25. 註冊成功後清除表單
- 26. 註冊/註冊表單PHP SQL
- 27. Sagepay表單集成不斷給出錯誤5080（表單事務註冊失敗）
- 28. 與註冊表單
- 29. 建立一個MailChimp註冊表單，得到一個PHP解析錯誤神祕
- 30. Ajax註冊FOSUserBundle
什麼不起作用？ – JamesHalsall
提交表單後重定向到mailchimp「確認」頁面。 – alexndm
您的解決方案存在巨大的安全漏洞，因此API密鑰應該被視爲私有，因爲它提供了對您的MailChimp帳戶的完全訪問權限。 #justsaying – 2012-01-30 17:34:12