В основном, вы используете jQuery ajax() в своей собственной HTML-форме для доступа к файлам PHP, которые взаимодействуют с API MailChimp. Ответы MailChimp возвращаются к вашей первоначальной форме через Ajax, поэтому нет перенаправления или обновления. Однако, если вы хотите перенаправить, вы просто измените функцию jQuery ajax, чтобы сделать это.
Даже если вы не используете PHP, он скорее всего будет установлен на вашем сервере. Ваши пользователи никогда не будут видеть файлы PHP; они просто используются в задней части.
Source: A SO answer I posted previously...
После шарить вокруг на некоторое время, я нашел сайт, используя в качестве примера PHP с JQuery. Из этого я смог создать простую HTML-страницу с jQuery, содержащую основную регистрационную форму. Файлы 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 с использованием соответствующих переменных слияния.
Вот что мой 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 файл выглядит следующим образом:
<html>
<head>
<title>Welcome</title>
<style type="text/css" media="screen">
body { font-size: 16px; }
input { font-size: 16px; }
.textinput { width: 300px; height: 20px; }
#message { color: #8e2c30; font-size: 15px; font-weight: bold; padding: 10px; border: solid 1px #6d6e70; }
</style>
</head>
<body>
<div style="width:550px;">
<div style="text-align:right;">
<b>Sign Up for the Newsletter:</b><br />
<br />
<form id="signup" action="index.html" method="get">
First Name: <input type="text" name="fname" id="fname" class="textinput" value="" />
<br />
Last Name: <input type="text" name="lname" id="lname" class="textinput" value="" />
<br />
email Address (required): <input type="email" name="email" id="email" class="textinput" value="" />
<br />
<input type="radio" name="emailtype" value="html" checked="checked">HTML <input type="radio" name="emailtype" value="text">Text <input type="radio" name="emailtype" value="mobile">Mobile Device<br />
<br />
<input type="submit" id="SendButton" name="submit" class="textinput" value="Submit" />
</form>
</div>
<div id="message">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var emailEntered,
fnameVal,
lnameVal,
emailtypeVal;
$(document).ready(function() {
$("#SendButton").click(function() {
$(".error").hide();
var emailReg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $("#email").val();
if(emailaddressVal == '') {
$("#message").html('<span class="error">Enter your email address before submitting.</span>');
return false;
}
else if(!emailReg.test(emailaddressVal)) {
$("#message").html("<span class='error'>That is not an email address. Typo?</span>");
return false;
}
else {
emailEntered = escape($('#email').val());
}
fnameVal = escape($("#fname").val());
lnameVal = escape($("#lname").val());
emailtypeVal = $('input:radio[name=emailtype]:checked').val();
});
$('#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: 'ajax=true&email=' + emailEntered +'&fname=' + fnameVal + '&lname=' + lnameVal + '&emailtype=' + emailtypeVal,
success: function(msg) {
$('#message').html(msg);
}
});
return false;
});
});
</script>
</body>
</html>
Требуемые куски ...
index.html построен как выше или аналогичный. С jQuery внешний вид и опции бесконечны.
магазин-address.php файл загружен как часть примеров PHP на сайте Mailchimp и модифицирована с API KEY и СПИСКА ID.Вам нужно добавить другие дополнительные поля в массив.
MCAPI.class.php файл, загруженный с сайта Mailchimp (версия 1.3 для PHP 5 или версия 1.2 для PHP 4). Поместите его в тот же каталог, что и ваш store-address.php, или вы должны обновить URL-адрес в пределах store-address.php, чтобы он мог его найти.