使用jQuery ajax解決mailchimp註冊表單二次跳轉問題

當我們在mailchimp後臺創建好表單之後，將表單html複製到我們的網站，我們發現，在提交表單時會再次跳轉到一個mailchimp表單提交頁面，且無法控制表單提交成功之後的邏輯。

如果我們能做到自己提交表單異步請求，然後就能控制mailchimp表單的提交了，所以這裏我記錄一下如何使用jQuery解決mailchimp註冊表單ajax集成問題。

下面是mailchimp表單html，我們需要把表單的action和method值給改了！
原始mailchimp表單的action是：https://XXXXXX/subscribe/post?u=XXXXXX&id=XXXXXX，
我們需要改成：https://XXXXXX/subscribe/post-json?u=XXXXXX&id=XXXXXX&c=?
然後把 method 改成 get 方法

 <!-- Begin Mailchimp Signup Form -->
    <div id="mc_embed_signup">
        <form id="form" action="https://XXXXXX/subscribe/post-json?u=XXXXXX&id=XXXXXX&c=?" method="get" name="mc-embedded-subscribe-form" class="validate" target="_blank">
            <div class="form-item">
                <input type="email" value="" name="EMAIL" class="required-entry validate-email email" id="mce-EMAIL" placeholder="郵箱（必填）">
            </div>
            <div class="form-item">
                <input type="text" value="" name="FIRSTNAME" class="" id="mce-FIRSTNAME" placeholder="姓名">
            </div>
            <div class="form-item">
                <input type="text" value="" name="MMERGE8" class="" id="mce-MMERGE8" placeholder="學校">
            </div>
            <div class="form-item"><button type="submit" name="subscribe" class="btn">提交</button></div>
        </form>
    </div>
    <!--End mc_embed_signup-->

js代碼如下（已經引入jQuery）：

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

      $('form button[type="submit"]').bind('click', function (event) {
          if (event) event.preventDefault();
          if ($form.validator.validate()) { submitForm(); } //注意，這裏的表單驗證方式使用的驗證插件，具體如何驗證視自身情況而定
      });

      function submitForm($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("err"); },
              success  : function(data) {
                  if (data.result != "success") {
                      console.log('error')
                      // 表單提交失敗...
                  } else {
                      // 表單提交成功...
                  }
              }
          });
      }
  });