Mailchimp Ajax 重定向

Question

所以我正在尝试使用 MailChimp 和 Ajax 创建一个简单的时事通讯注册来在后台处理事件。我的问题是它重定向到包含当前代码的页面。我怎样才能修复它，以便在完成后它只显示复选标记而不显示其他内容？我知道动画代码不在正确的位置，它就在那里，所以我可以在重定向之前看到它。

var subscribe_button = document.querySelector(".fi-mail");

subscribe_button.addEventListener('click', function(){
 document.getElementById('ava-subscribe-form').submit();
  subscribe_button.classList.remove("fi-mail");
  subscribe_button.classList.add("fi-check");
});

function register($form) {
    $.ajax({
        type: $form.attr('method'),
        url: '//https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post&amp;id=0ae3f9ab0f&c=?',
        data: $('#ava-subscribe-form').serialize(),
        dataType: 'json',
        cache       : false,
        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") {
              alert(data.msg);
            } else {
                // It worked, carry on...
            }
        }
    });
}

$(document).ready( function () {
    var $form = $('ava-subscribe-form');

    if ( $form.length > 0 ) {
        $('form input[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
              register($form);
        });
    }
});

* {
 -webkit-font-smoothing: antialiased;
 font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
 font-size: 15px;
 color: rgba(255,255,255,0.6);
}

html {
 background: linear-gradient(134.72deg, #EB4B92 0%, #CA76E3 100%);
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height: 100%;
}

body {
 text-align: center;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0px;
  -webkit-text-fill-color: rgba(255,255,255,0.6);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: rgba(255,255,255,0.6);
}

form {
 background: transparent;
 height: 50px;
 width: 300px;
 -webkit-border-radius: 25px;
 border-radius: 25px;
 -webkit-box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
 box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
 top: 50%;
 left: 50%;
 position: absolute;
 margin: -25px 0 0 -150px;
}

input {
  background: transparent;
 float: left;
 padding: 14px 0;
 border: 0;
 outline: 0;
 margin-left: 25px;
 width: 220px;
}

form a {
 float: right;
 background: rgba(255,255,255,0.1);
 border: 0;
 line-height: 38px;
 height: 38px;
 width: 38px;
 margin: 6px 6px 0 0;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 color: rgba(255,255,255,0.3);
 font-size: 1.2em;
 text-align: center;
 cursor: pointer;
 text-decoration: none;
}

form a:hover {
 background: rgba(0,0,0,0.1);
}

form a.fi-check {
 background: rgba(255,255,255,0.1);
 -webkit-transition: all 0.6s ease;
 -moz-transition: all 0.6s ease;
 -ms-transition: all 0.6s ease;
 -o-transition: all 0.6s ease;
 transition: all 0.6s ease;
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg); 
 -o-transform: rotate(360deg);
}

form a.fi-check:hover {
 cursor: default;
} 

.a-thing {
 color: rgba(255,255,255,0.9);
 font-weight: bold;
 font-size: .9em;
 text-shadow: 0 1px rgba(0,0,0,0.2);
 position: absolute;
 bottom: 20px;
 left: 50%;
 margin-left: -195px;
}

.a-thing a {
 color: rgba(255,255,255,0.2);
 text-decoration: none;
}

.a-thing a:hover {
 color: rgba(255,255,255,0.2);
}

@font-face {
  font-family: "foundation-icons";
  src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.svg#GeneralFoundicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class*="fi-"]:before {
  font-family: "foundation-icons";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  display: inline-block;
}

.fi-check:before {
  content: "\f126";
}

.fi-mail:before {
  content: "\f16d";
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    rgba(0, 0, 0, .2);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    rgba(0, 0, 0, .2);
   opacity:  .2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    rgba(0, 0, 0, .2);
   opacity:  .2;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    rgba(0, 0, 0, .2);
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    rgba(0, 0, 0, .2);
}

::placeholder { /* Most modern browsers support this now. */
   color:    rgba(0, 0, 0, .2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post" method="POST" id="ava-subscribe-form">
  <input type="hidden" name="u" value="9c9cbcbf400c4df4622eef40f">
  <input type="hidden" name="id" value="0ae3f9ab0f">
  <input type="email" placeholder="ava@example.com" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0">
  <a type="submit" class="fi-mail"></a> 
</form>

Answer 1

原因是您将 jquery 事件附加到错误的目标。
您可能会得到如下代码的预期结果。

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="ava-subscribe-form">
  <input type="hidden" name="u" value="9c9cbcbf400c4df4622eef40f">
  <input type="hidden" name="id" value="0ae3f9ab0f">
  <input type="email" placeholder="ava@example.com" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0">
  <a href="javascript:void(0)" class="fi-mail"></a> 
</form>

js

/* moved these code to jquery click
var subscribe_button = document.querySelector(".fi-mail");

subscribe_button.addEventListener('click', function(){
  document.getElementById('ava-subscribe-form').submit();
  subscribe_button.classList.remove("fi-mail");
  subscribe_button.classList.add("fi-check");
});
*/

function register($form) {
    $.ajax({
        type: $form.attr('method'),
        url: 'https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post-json?&c=?',
        data: $('#ava-subscribe-form').serialize(),
        dataType: 'json',
        cache       : false,
        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") {
              alert(data.msg);
            } else {
                // It worked, carry on...
            }
        }
    });
}

$(document).ready( function () {
    var $form = $('#ava-subscribe-form');

    if ( $form.length > 0 ) {
        $('a.fi-mail').bind('click', function () {
            // not to do page transition, i changed event.preventDefault() to href="javascript:void(0)
            $(this).removeClass('fi-mail').addClass('fi-check');
            register($form);
        });
    }
});

Mailchimp Ajax 重定向

Mailchimp Ajax Redirect

html

javascript

ajax

jquery

mailchimp