[解決済み] 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...
}
}
});
}
関連
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] どうすればjQueryに非同期ではなく、同期のAjaxリクエストを実行させることができますか?
-
[解決済み] jQuery AJAX送信フォーム
-
[解決済み] 文字列が空白であるかどうかをチェックする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] JavaScriptやjQueryで値が数字かどうかをチェックする [重複]。