มีวิธีใดบ้างในการรวม mailchimp อย่างง่าย (การป้อนอีเมลหนึ่งรายการ) กับ AJAX ดังนั้นจึงไม่มีการรีเฟรชหน้าและไม่มีการเปลี่ยนเส้นทางไปยังหน้า mailchimp เริ่มต้น
วิธีนี้ใช้ไม่ได้jQuery Ajax POST ไม่ทำงานกับ MailChimp
ขอบคุณ
มีวิธีใดบ้างในการรวม mailchimp อย่างง่าย (การป้อนอีเมลหนึ่งรายการ) กับ AJAX ดังนั้นจึงไม่มีการรีเฟรชหน้าและไม่มีการเปลี่ยนเส้นทางไปยังหน้า mailchimp เริ่มต้น
วิธีนี้ใช้ไม่ได้jQuery Ajax POST ไม่ทำงานกับ MailChimp
ขอบคุณ
คำตอบ:
คุณไม่จำเป็นต้องใช้คีย์ API สิ่งที่คุณต้องทำก็คือใส่แบบฟอร์มมาตรฐานที่สร้างโดย mailchimp ลงในโค้ดของคุณ (ปรับแต่งรูปลักษณ์ตามต้องการ) และในรูปแบบแอตทริบิวต์ "action" post?u=
จะเปลี่ยนเป็นpost-json?u=
จากนั้นเมื่อสิ้นสุดการดำเนินการแบบฟอร์ม ผนวก&c=?
เพื่อแก้ไขปัญหาข้ามโดเมน สิ่งสำคัญที่ควรทราบคือเมื่อคุณส่งแบบฟอร์มคุณต้องใช้ GET แทนการโพสต์
แท็กฟอร์มของคุณจะมีลักษณะดังนี้โดยค่าเริ่มต้น:
<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 ค่า "error" และ "success") และ "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...
}
}
});
}
post-json
ตามที่อธิบายไว้ ลบ&c=
if You have ใน url การดำเนินการแบบฟอร์ม ใช้dataType: 'jsonp'
และjsonp: 'c'
สำหรับการโทร jQuery ajax ของคุณ
EMAIL
(ตัวพิมพ์ใหญ่ทั้งหมด) มิฉะนั้นคุณจะได้รับข้อผิดพลาดระบุว่าที่อยู่อีเมลว่างเปล่า
จากคำตอบของ 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 Variables ที่เกี่ยวข้อง
นี่คือ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 รูปลักษณ์และตัวเลือกไม่มีที่สิ้นสุด
ไฟล์store-address.phpดาวน์โหลดเป็นส่วนหนึ่งของตัวอย่าง PHP บนไซต์ Mailchimp และแก้ไขด้วยคีย์ APIและLIST ID ของคุณ คุณต้องเพิ่มช่องทางเลือกอื่น ๆ ของคุณในอาร์เรย์
ไฟล์MCAPI.class.php ที่ดาวน์โหลดจากไซต์Mailchimp (เวอร์ชัน 1.3 สำหรับ PHP 5 หรือเวอร์ชัน 1.2 สำหรับ PHP 4) วางไว้ในไดเร็กทอรีเดียวกับstore-address.php ของคุณหรือคุณต้องอัปเดตเส้นทาง url ภายในstore-address.phpเพื่อให้สามารถค้นหาได้
สำหรับใครก็ตามที่กำลังมองหาวิธีแก้ปัญหาบนกองซ้อนสมัยใหม่:
import jsonp from 'jsonp';
import queryString from 'query-string';
// formData being an object with your form data like:
// { EMAIL: 'emailofyouruser@gmail.com' }
jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => {
console.log(err);
console.log(data);
});
จากคำตอบของ gbinflames นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน:
สร้างแบบฟอร์มลงทะเบียนรายการ mailchimp อย่างง่ายคัดลอก 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...
}
}
สำหรับวันที่นี้ (กุมภาพันธ์ 2017) ดูเหมือนว่า mailchimp ได้รวมสิ่งที่คล้ายกับที่ gbinflames แนะนำไว้ในรูปแบบที่สร้างด้วยจาวาสคริปต์ของตัวเอง
คุณไม่จำเป็นต้องมีการแทรกแซงใด ๆ ในตอนนี้เนื่องจาก mailchimp จะแปลงแบบฟอร์มเป็น ajax ที่ส่งมาเมื่อเปิดใช้งานจาวาสคริปต์
สิ่งที่คุณต้องทำตอนนี้เพียงแค่วางแบบฟอร์มที่สร้างขึ้นจากเมนูฝังลงในหน้า html ของคุณและไม่ต้องแก้ไขหรือเพิ่มโค้ดอื่นใด
เพียงแค่นี้ก็ใช้งานได้ ขอบคุณ MailChimp!
ใช้ปลั๊กอิน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);
}
});
})
ในทางกลับกันมีบางแพ็คเกจใน AngularJS ซึ่งมีประโยชน์ (ใน AJAX WEB):