129

mailchimp simple（1つの電子メール入力）をAJAXと統合する方法はありますか？そのため、ページの更新やデフォルトのmailchimpページへのリダイレクトはありません。

このソリューションは機能しませんjQueryAjaxPOSTがMailChimpで機能しません

ありがとう

4

9 に答える 9

253

APIキーは必要ありません。必要なのは、mailchimpで生成された標準のフォームをコードに挿入し（必要に応じて外観をカスタマイズします）、フォームの「action」属性を変更post?u=してpost-json?u=、フォームのアクションの最後に配置することです。&c=?クロスドメインの問題を回避するために追加します。また、フォームを送信するときは、POSTではなく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は、2つの値を含むjsonオブジェクトを返します。'result'-これは、リクエストが成功したかどうかを示します（"error"と"success"の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...
            }
        }
    });
}
于 2013-02-27T19:15:09.380 に答える
34

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（）を使用して、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;
});
于 2013-04-23T15:04:13.993 に答える
20

MailChimpアカウントを保護するには、サーバー側のコードを使用する必要があります。

以下は、 PHPを使用するこの回答の更新バージョンです。

PHPファイルはサーバー上で「保護」されており、ユーザーには表示されませんが、jQueryは引き続きアクセスして使用できます。

1）ここからPHP5jQueryの例をダウンロードします...

http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip

PHP 4しかない場合は、MCAPIのバージョン1.2をダウンロードして、MCAPI.class.php上記の対応するファイルを置き換えてください。

http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip

2）APIキーとリストIDをstore-address.phpファイルの適切な場所に追加して、Readmeファイルの指示に従います。

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）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 file downloaded as part of PHP examples on Mailchimp site and modified with your API KEY and LIST ID. You need to add your other optional fields to the array.

  • MCAPI.class.php file downloaded from Mailchimp site (version 1.3 for PHP 5 or version 1.2 for PHP 4). Place it in the same directory as your store-address.php or you must update the url path within store-address.php so it can find it.

于 2013-02-27T22:29:50.877 に答える
18

最新のスタックでソリューションを探している人のために：

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);
});
于 2018-05-30T18:49:01.857 に答える
6

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...
          }
      }
于 2013-08-30T19:26:33.363 に答える
5

この日付（2017年2月）に関しては、mailchimpはgbinflamesが提案するものと同様のものを独自のjavascript生成フォームに統合したようです。

javascriptが有効になっている場合、mailchimpはフォームをajaxで送信されたフォームに変換するため、これ以上の介入は必要ありません。

ここで行う必要があるのは、生成されたフォームを埋め込みメニューからhtmlページに貼り付けるだけで、他のコードを変更または追加する必要はありません。

これは単純に機能します。MailChimpに感謝します！

于 2017-02-02T10:53:43.153 に答える
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);
    }
  });
})
于 2014-05-30T01:25:58.447 に答える
0

一方、AngularJSには（AJAX WEBで）役立つパッケージがいくつかあります。

https://github.com/cgarnier/angular-mailchimp-subscribe

于 2017-05-30T06:52:39.743 に答える
0

これをfetchで機能させることができなかったため、ここでGETを使用していくつかの回答を組み合わせ、フォーム入力をURLのクエリ文字列に解析する必要がありました。またname、入力の必要はEMAILありませんでしたが、読みやすくなり、コードが壊れることはないと思います（この単純なケースでは、他のフォームフィールドがある場合は試してみてください）。

これが私のコードです。

<form action="https://me.usxx.list-manage.com/subscribe/post-json?" id="signup" method="GET">
  <input type="hidden" name="u" value="xxxxxxxxxxxxxxxxxx"/>
  <input type="hidden" name="id" value="xxxxxxxxx"/>
  <input type="hidden" name="c" value="?"/>
  <input name="EMAIL" type="text" />
</form>

// Form submission handler
const formData = new FormData(signup);

fetch(signup.action + new URLSearchParams(formData).toString(), {
  mode: 'no-cors',
  method: signup.method,
})
.then((res) => {
  // Success
})
.catch((e) => {
  // Error
})

あなたはそれをno-jsフレンドリーにすることができます...

<form action="https://me.usxx.list-manage.com/subscribe/post" id="signup">

fetch(signup.action + '-json?' + new URLSearchParams(formData).toString(), {

そして、私が不必要に行ったようにぶらぶらした人々を救うために、Mailchimp内でオーディエンスのサインアップフォームを作成する必要があります。そのページにアクセスすることで、あなたのu価値とid同様にを得ることができますaction。たぶんこれは私だけだったのかもしれませんが、それは明確ではないと思いました。

于 2022-02-05T10:21:44.747 に答える