使用jQuery ajax解决mailchimp注册表单二次跳转问题

╰半橙微兮° 2021-12-05 22:37 303阅读 0赞

当我们在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` 方法

<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>

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 { 
                          // 表单提交成功...
                      }
                  }
              });
          }
      });