এজেএক্সের সাথে মেলচিম্প সিম্পল (একটি ইমেল ইনপুট) সংহত করার কোনও উপায় আছে, তাই কোনও পৃষ্ঠা রিফ্রেশ নেই এবং ডিফল্ট মেলচিম্প পৃষ্ঠায় কোনও পুনর্নির্দেশ নেই।
এই সমাধানটি jQuery কাজ করে না অ্যাজাক্স পোস্ট মেলচিম্পের সাথে কাজ করছে না
ধন্যবাদ
এজেএক্সের সাথে মেলচিম্প সিম্পল (একটি ইমেল ইনপুট) সংহত করার কোনও উপায় আছে, তাই কোনও পৃষ্ঠা রিফ্রেশ নেই এবং ডিফল্ট মেলচিম্প পৃষ্ঠায় কোনও পুনর্নির্দেশ নেই।
এই সমাধানটি jQuery কাজ করে না অ্যাজাক্স পোস্ট মেলচিম্পের সাথে কাজ করছে না
ধন্যবাদ
উত্তর:
আপনার একটি এপিআই কী দরকার নেই, আপনাকে যা করতে হবে তা হ'ল মানক মেলচিম্প উত্পন্ন ফর্মটি আপনার কোডের মধ্যে প্লপ করে (প্রয়োজনীয় রূপটি কাস্টমাইজ করুন) এবং ফর্মগুলির মধ্যে "ক্রিয়া" বৈশিষ্ট্য পরিবর্তন post?u=
করতে হবে post-json?u=
এবং তারপরে ফর্মগুলির ক্রিয়া শেষে যে &c=?
কোনও ক্রস ডোমেন ইস্যুটি পেতে যোগ করুন । এছাড়াও এটি লক্ষণীয় গুরুত্বপূর্ণ যে আপনি ফর্মটি জমা দেওয়ার সময় অবশ্যই পোষ্টের পরিবর্তে জিইটি ব্যবহার করতে হবে।
আপনার ফর্ম ট্যাগটি ডিফল্টরূপে দেখতে এরকম কিছু দেখাবে:
<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 টি মান সহ ফিরিয়ে দেবে: 'ফলাফল' - এটি অনুরোধটি সফল হয়েছিল কিনা তা নির্দেশ করবে (আমি কেবল 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...
}
}
});
}
post-json
বর্ণিত হিসাবে ব্যবহার করুন । &c=
ফর্ম অ্যাকশন url এ থাকলে তা সরান । আপনার jQuery আজাক্স কল dataType: 'jsonp'
এবং jsonp: 'c'
ব্যবহার করুন ।
EMAIL
(সমস্ত ক্যাপ) হওয়া উচিত । অন্যথায় আপনি ইমেল ঠিকানাটি ফাঁকা বলে উল্লেখ করে একটি ত্রুটি পাবেন।
গিনফ্লেমসের উত্তরের ভিত্তিতে, আমি পোস্ট এবং ইউআরএল রেখেছি, যাতে ফর্মটি জেএস বন্ধ থাকা ব্যক্তিদের জন্য কাজ চালিয়ে যেতে পারে।
<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 () ব্যবহার করে JSON রিপসনসগুলি পরিচালনা করতে প্রকার এবং URL টি পরিবর্তন করা হয়েছে।
$('.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 অ্যাকাউন্টকে সুরক্ষিত করার জন্য সার্ভার সাইড কোডটি ব্যবহার করুন।
নীচে এই উত্তরের একটি আপডেট সংস্করণ যা পিএইচপি ব্যবহার করে :
পিএইচপি ফাইলগুলি সার্ভারে "সুরক্ষিত" থাকে যেখানে ব্যবহারকারীরা সেগুলি কখনও দেখেনি এখনও jQuery এখনও অ্যাক্সেস এবং ব্যবহার করতে পারে।
1) এখানে পিএইচপি 5 jQuery উদাহরণ ডাউনলোড করুন ...
http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip
যদি আপনার কাছে কেবল পিএইচপি 4 থাকে তবে কেবল এমসিএপিআইয়ের 1.2 সংস্করণ ডাউনলোড করুন এবং MCAPI.class.php
উপরের সংশ্লিষ্ট ফাইলটি প্রতিস্থাপন করুন ।
http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip
2) store-address.php
যথাযথ অবস্থানগুলিতে আপনার API কী এবং তালিকার আইডি যুক্ত করে রেডমি ফাইলের দিকনির্দেশগুলি অনুসরণ করুন ।
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) আপনার এইচটিএমএল / সিএসএস / jQuery ফর্ম তৈরি করুন। এটি পিএইচপি পৃষ্ঠায় থাকা প্রয়োজন হয় না।
আমার 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 সহ, উপস্থিতি এবং বিকল্পগুলি অন্তহীন।
মেলচিম্প সাইটে পিএইচপি উদাহরণগুলির অংশ হিসাবে স্টোর-ঠিকানা.পিএফপি ফাইল ডাউনলোড হয়েছে এবং আপনার এপিআই কেই এবং তালিকা আইডির মাধ্যমে সংশোধিত হয়েছে । অ্যারেতে আপনার অন্যান্য alচ্ছিক ক্ষেত্রগুলি যুক্ত করতে হবে।
MCAPI.class.php ফাইলটি মেলচিম্প সাইট থেকে ডাউনলোড হয়েছে (পিএইচপি 5 এর জন্য সংস্করণ 1.3 বা পিএইচপি 4 এর জন্য সংস্করণ 1.2)। এটিকে আপনার স্টোর-এড্রেস.এফপি হিসাবে একই ডিরেক্টরিতে রাখুন বা আপনার অবশ্যই স্টোর-ঠিকানা.php এর মধ্যে url পাথ আপডেট করতে হবে যাতে এটি এটি খুঁজে পেতে পারে।
আধুনিক স্ট্যাকের সমাধান সন্ধানের জন্য যে কেউ:
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 এর উত্তরের ভিত্তিতে, এটি আমার জন্য কাজ করেছিল:
একটি সাধারণ মেলচিম্প তালিকা সাইন আপ ফর্ম তৈরি করুন, আপনার কাস্টম ফর্মটিতে ক্রিয়া URL এবং পদ্ধতি (পোস্ট) অনুলিপি করুন। সমস্ত মূলধনীতে আপনার ফর্ম ক্ষেত্রের নামগুলি পুনরায় নামকরণ করুন (নাম = 'EMAIL' আসল মেলচিম্প কোড হিসাবে, 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), মনে হচ্ছে যে মেলচিম্প gbinflames তাদের নিজস্ব জাভাস্ক্রিপ্ট উত্পাদিত ফর্মের মধ্যে যা প্রস্তাব দেয় তার অনুরূপ কিছু সংহত করেছে।
আপনার এখন আর কোনও হস্তক্ষেপের দরকার নেই কারণ জাভাস্ক্রিপ্ট সক্ষম করা থাকলে মেলচিম্প ফর্মটিকে একটি এজ্যাক্সে রূপান্তরিত করে।
আপনাকে এখনই যা করতে হবে তা হ'ল কেবলমাত্র এইচটিএমএল পৃষ্ঠায় এমবেড মেনু থেকে উত্পন্ন ফর্মটি আটকানো এবং অন্য কোনও কোড সংশোধন বা সংযুক্ত করা না।
এটি সহজভাবে কাজ করে। ধন্যবাদ মেলচিম্প!
এটি অর্জনের জন্য 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);
}
});
})
অন্যদিকে, অ্যাঙ্গুলারজেএস-এ কিছু প্যাকেজ রয়েছে যা সহায়ক (এজেএক্স ডব্লিউইবিতে):