1. ホーム
  2. javascript

[解決済み] AJAX Mailchimp サインアップフォームの統合

2022-07-28 04:04:40

質問

mailchimpのシンプルな(1つの電子メール入力)AJAXと統合する方法はありますか?そうすれば、ページのリフレッシュやデフォルトのmailchimpページへのリダイレクトがなくなります。

この解決策はうまくいきません jQuery Ajax POSTがMailChimpで動作しない。

ありがとうございます。

どのように解決するのですか?

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