Есть ли способ интегрировать mailchimp simple (один ввод электронной почты) с AJAX, поэтому обновление страницы и перенаправление на страницу mailchimp по умолчанию отсутствует.
Это решение не работает jQuery Ajax POST не работает с MailChimp
Спасибо
Вам не нужен ключ API, все, что вам нужно сделать, это вставить стандартную форму, созданную с помощью mailchimp, в ваш код (при необходимости настроить внешний вид) и изменить атрибут "действие" формы 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" ... >
Mail Chimp вернет json-объект, содержащий 2 значения: "result" - это будет указывать, был ли запрос успешным или нет (я видел только 2 значения, "ошибка" и "успех" ) и "msg" - сообщение, описывающее результат.
Я передаю свои формы с этим битом 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...
}
}
});
}
Основываясь на ответе 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.
$('.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;
});
Вы должны использовать код на стороне сервера, чтобы защитить свою учетную запись MailChimp.
Ниже приведен обновленный вариант этого ответа, который использует PHP:
Файлы PHP "защищены" на сервере, где пользователь никогда не видит их, но jQuery все еще может пользоваться и использовать.
1) Загрузите здесь пример PHP 5 jQuery...
http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip
Если у вас есть только PHP 4, просто загрузите версию 1.2 MCAPI и замените соответствующий файл MCAPI.class.php выше.
http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip
2) Следуйте указаниям в файле Readme, добавив ключ API и идентификатор списка в файл store-address.php в соответствующих местах.
3) Вы также можете захотеть собрать имя пользователя и/или другую информацию. Вы должны добавить массив в файл store-address.php, используя соответствующие переменные Merge.
Вот как выглядит мой файл 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 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 внешний вид и опции бесконечны.
store-address.php файл, загруженный как часть примеров PHP на сайте Mailchimp и измененный с помощью API KEY и LIST ID. Вам нужно добавить другие дополнительные поля в массив.
Файл MCAPI.class.php, загруженный с сайта Mailchimp (версия 1.3 для PHP 5 или версия 1.2 для PHP 4). Поместите его в тот же каталог, что и ваш store-address.php, или вы должны обновить URL-адрес в store-address.php, чтобы он мог его найти.
Основываясь на ответе gbinflames, это то, что сработало для меня:
Создайте простую форму регистрации списка почтовых отправлений, скопируйте URL-адрес действия и метод (сообщение) в свою собственную форму. Также переименуйте имена полей формы ко всему капиталу (name= 'EMAIL', как в исходном коде 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...
}
}
Используйте 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);
}
});
})
Что касается этой даты (февраль 2017 года), кажется, что mailchimp интегрировал нечто похожее на то, что предлагает gbinflames, в свою собственную сгенерированную javascript форму.
Теперь вам не нужно какое-либо дальнейшее вмешательство, поскольку mailchimp преобразует форму в представленную ajax, когда включен javascript.
Все, что вам нужно сделать, это просто вставить сгенерированную форму из встраиваемого меню в вашу страницу html и НЕ изменять или не добавлять какой-либо другой код.
Это просто работает. Спасибо MailChimp!
С другой стороны, в AngularJS есть некоторые пакеты, которые полезны (в AJAX WEB):