AJAX মেলচিম্প সাইনআপ ফর্ম একীকরণ


122

এজেএক্সের সাথে মেলচিম্প সিম্পল (একটি ইমেল ইনপুট) সংহত করার কোনও উপায় আছে, তাই কোনও পৃষ্ঠা রিফ্রেশ নেই এবং ডিফল্ট মেলচিম্প পৃষ্ঠায় কোনও পুনর্নির্দেশ নেই।

এই সমাধানটি jQuery কাজ করে না অ্যাজাক্স পোস্ট মেলচিম্পের সাথে কাজ করছে না

ধন্যবাদ


ফর্মটি জমা দেওয়ার পরে এটি মেইলচিম্প "নিশ্চিত" পৃষ্ঠাতে পুনঃনির্দেশ করে।
আলেকজেন্ডেম

3
আপনার সমাধানটিতে বিশাল সুরক্ষা গর্ত রয়েছে, এপিআই কীটি ব্যক্তিগত হিসাবে বিবেচনা করা উচিত কারণ এটি আপনার মেলচিম্প অ্যাকাউন্টে সম্পূর্ণ অ্যাক্সেস সরবরাহ করে না। # জাস্টসায়িং

1
এই সমাধানটি আপনার মেলচিম্প এপিআই প্রকাশ করে যা কোনও ভাল ধারণা নয়
রৌয়েরি ব্রাউন

3
মেলচিম্পের ওয়েবসাইটে ডিফল্ট এইচটিএমএল এম্বেড বিকল্পটি আপনার এপিআই কীটিও প্রকাশ করে না? এটি সমাধানের পরে আরও ভাল বা খারাপ আর কিছু হতে পারে না।
বব ববিও

এই jquery প্লাগইনটি ব্যবহার করুন: github.com/scdoshi/jquery-ajaxchimp
সিড করুন

উত্তর:


241

আপনার একটি এপিআই কী দরকার নেই, আপনাকে যা করতে হবে তা হ'ল মানক মেলচিম্প উত্পন্ন ফর্মটি আপনার কোডের মধ্যে প্লপ করে (প্রয়োজনীয় রূপটি কাস্টমাইজ করুন) এবং ফর্মগুলির মধ্যে "ক্রিয়া" বৈশিষ্ট্য পরিবর্তন 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...
            }
        }
    });
}

8
আমি jQuery-plugin যে ব্যবহারসমূহ এই পদ্ধতি তৈরি করেছেন: github.com/scdoshi/jquery-ajaxchimp
SID

22
আপনি জেএসওএনপি ব্যবহার করতে পারেন। post-jsonবর্ণিত হিসাবে ব্যবহার করুন । &c=ফর্ম অ্যাকশন url এ থাকলে তা সরান । আপনার jQuery আজাক্স কল dataType: 'jsonp'এবং jsonp: 'c'ব্যবহার করুন ।
czerasz

5
নোট করুন যে ইমেল ফর্ম ফিল্ডগুলির অবশ্যই মেলচিম্প প্রক্রিয়া করার জন্য নাম "" EMAIL "থাকতে হবে
ইয়ান ওয়ার্নার

5
কারও সমস্যা থাকলে কেবল এফওয়াইআই, ইমেল প্যারামিটারের নামটি EMAIL(সমস্ত ক্যাপ) হওয়া উচিত । অন্যথায় আপনি ইমেল ঠিকানাটি ফাঁকা বলে উল্লেখ করে একটি ত্রুটি পাবেন।
নিক টিবেরি

5
এই উত্তরটি লেখা হওয়ার পর থেকে মেলচিম্প এপিআই অ্যাক্সেসের এই পদ্ধতিটি অক্ষম করেছে? আমি ডকুমেন্টেশনে এমন কোনও ইঙ্গিত দেখিনি যা এপিআই কী ব্যতীত কোনও জিইটি / পোষ্ট কোনও ব্যবহারকারীর তালিকাতে সাবস্ক্রাইব করতে পারে।
গ্রেগ বেল

34

গিনফ্লেমসের উত্তরের ভিত্তিতে, আমি পোস্ট এবং ইউআরএল রেখেছি, যাতে ফর্মটি জেএস বন্ধ থাকা ব্যক্তিদের জন্য কাজ চালিয়ে যেতে পারে।

<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;
});

18

আপনি উচিত আপনার 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!&nbsp; Check your inbox or spam folder for a message containing a confirmation link.';
    }else{
        // An error ocurred, return error message   
        return '<b>Error:</b>&nbsp; ' . $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 পাথ আপডেট করতে হবে যাতে এটি এটি খুঁজে পেতে পারে।


2
আপনি যদি কেবল নিজের সাইটে একটি সাইনআপ ফর্ম যুক্ত করতে চান এবং এজেএক্সের মাধ্যমে জমা দিতে চান, @ জিবিনফ্লেমসের উত্তর কাজ করে। খালি চেষ্টা করে দেখলাম।
প্যাট্রিক ক্যানফিল্ড

1
না, নেই আবশ্যক
এখনকার

2
ক্র্যাপ, আমি বলতে চাই - আমি @ স্কুবের উত্তর কার্যকর করেছি কিছুক্ষণ আগে কোনও সাইটে এবং তারপরে পরে সাইট-প্রশস্ত https যুক্ত করেছি। সবেমাত্র আবিষ্কার হয়েছে যে এটি মেলচিম্প HTTP AJAX কলটির সাথে কাজ করছে না। আপনার সাইটের যদি কখনও এসএসএল ব্যবহারের প্রয়োজন হয় বা বিবেচনা করতে পারে তবে সরাসরি এই পদ্ধতিটি ব্যাট হাতে রেখে যাওয়ার পরামর্শ দিন।
স্কয়ারকাণ্ডি

12

আধুনিক স্ট্যাকের সমাধান সন্ধানের জন্য যে কেউ:

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);
});

6

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...
          }
      }

5

এই তারিখ হিসাবে (ফেব্রুয়ারী 2017), মনে হচ্ছে যে মেলচিম্প gbinflames তাদের নিজস্ব জাভাস্ক্রিপ্ট উত্পাদিত ফর্মের মধ্যে যা প্রস্তাব দেয় তার অনুরূপ কিছু সংহত করেছে।

আপনার এখন আর কোনও হস্তক্ষেপের দরকার নেই কারণ জাভাস্ক্রিপ্ট সক্ষম করা থাকলে মেলচিম্প ফর্মটিকে একটি এজ্যাক্সে রূপান্তরিত করে।

আপনাকে এখনই যা করতে হবে তা হ'ল কেবলমাত্র এইচটিএমএল পৃষ্ঠায় এমবেড মেনু থেকে উত্পন্ন ফর্মটি আটকানো এবং অন্য কোনও কোড সংশোধন বা সংযুক্ত করা না।

এটি সহজভাবে কাজ করে। ধন্যবাদ মেলচিম্প!


4
আপনি যদি কিছু করার জন্য কিছু নিবন্ধ লিঙ্ক / ব্লগ পোস্ট যুক্ত করতে পারেন তবে এটি সত্যিই সহায়তা করবে
গ্যাফিশিং

আমি আমার এইচটিএমএল পৃষ্ঠায় মেলচিম্প এম্বেড কোড যুক্ত করেছি তবে উপরে উল্লিখিত প্রস্তাব অনুযায়ী অজাক্স স্বয়ংক্রিয়ভাবে কাজ করে না। আমি অন্য পৃষ্ঠায় পুনঃনির্দেশিত হয়েছি। পুনঃনির্দেশ ছাড়াই আমি কীভাবে এই কাজটি করতে পারি?
পেট্রা

1
মেলচিম্প প্রশাসনে আপনার তালিকায় যান -> সাইনআপ ফর্ম -> এমবেডড ফর্ম -> ক্লাসিক। আপনি দেখতে পাবেন যে কোড স্নিপেটে কিছু জেএস অন্তর্ভুক্ত রয়েছে। এটি ফর্মের বৈধতা এবং এজেএক্স জমা সক্ষম করবে।
মারকগুয়ে

1
মেলচিম্প কোডটি ব্যবহার করে - আমি আজাক্স সাফল্যে কীভাবে একটি কাস্টম অ্যাকশন প্লাগ করব? [ফর্মটি আড়াল করার মতো]
অ্যাডারলিক

1
@ ম্যাসিওরামা আমি এমসি-ভ্যালিড স্ক্রিপ্টটি সরিয়ে নেওয়ার পক্ষে বেছে নিয়েছি, কারণ এতে একটি পুরানো জেকোয়ারি রয়েছে এবং এটি খুব বড় এবং দুর্বল ছিল। তাই ঠিক এইচটিএমএল বৈধতা থাকার এবং মত AJAX সঙ্গে জমা দেওয়ার stackoverflow.com/a/15120409/744690
Adeerlike

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);
    }
  });
})

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.