web-dev-qa-db-ja.com

MailchimpはjQuery AJAXを使用してサブスクライブしますか？

Mailchimpのリストの使用をサブスクライブするための完全なjQueryソリューションは何ですか？

問題は、ほとんどのソリューションがライブラリを使用するか、サーバー側のコードを必要とすることです。私はUIを完全に制御できる簡潔で洗練されたソリューションを求めているため、フォームのUXとその機能を利用できます。

jqueryajaxmailchimpsubscribe
15
Nagra

@Nagraのソリューションは優れていますが、Same-Origin Security Policiesが有効であるため、クライアントのブラウザーから実行するとエラーがスローされます。本質的に、これらのセキュリティ対策は、発信者と送信者が異なるドメイン上にある場合に発生するクロスサイトリクエストの防止にあります。

JavaScriptコンソールに以下のようなエラーが表示された場合、それは明確な兆候です。

XMLHttpRequest cannot load http://YOUR-MAILCHIMP-URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://BROWSER-LOCATION is therefore not allowed access.

この問題を克服するには、CORSまたはJSONPを利用するようにスクリプトを書き直す必要があります。 MailChimp APIはCORSをサポートしていないため、唯一のオプションは文書化されていないJSONPインターフェースです。

/ subscribe/post-json？バージョンを使用するようにURLを変更し、最後にappend＆c =？を使用します。 URLが更新されたら、JSONハッシュのdataTypeをjsonpに変更する必要もあります。

関数の更新された最初の数行は以下のようになります。

$.ajax({
    url: '//YOUR URL&id=YOUR LIST ID&c=?',
    data: $('#YOUR FORM').serialize(),
    dataType: 'jsonp',
32
nneko

  1. リスト>サインアップフォーム>（クラシックフォーム）を選択して、リストのURLを取得します。 'Copy/paste your your site' textareaにあり、ユーザー名で始まる可能性が高いです。

    $('#your-form').submit(function (e) {
    e.preventDefault();

    $.ajax({
        url: 'YOUR URL',
        type: 'GET',
        data: $('#your-form').serialize(),
        dataType: 'jsonp',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
           if (data['result'] != "success") {
                //ERROR
                console.log(data['msg']);
           } else {
                //SUCCESS - Do what you like here
           }
        }
    });
});
8
Nagra