Mailchimp 通过 jQuery Ajax。提交正确，但 JSON 响应作为单独的页面返回

Question

我有以下表格：

<form class="footer-newsletter-form" id="footer-newsletter" method="post" action="http://xxxxxx.us1.list-manage.com/subscribe/post-json?u=xxxxxxxxxxxxxxxxxxxxxxxxx&id=xxxxxxxxxx&c=?">
    <input id="email" name="EMAIL" type="email" class="input-text required-entry validate-email footer__newsletter-field" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}">
    <button type="submit" title="Subscribe" class="button button1 hover-white footer__newsletter-button">SUBSCRIBE</button>
    <div id="subscribe-result"></div>
</form>

以及以下 jquery 位：

<script type="text/javascript">
$(document).ready(function () {
    function register($form) {
    jQuery.ajax({
        type: "GET",
        url: $form.attr('action'),
        data: $form.serialize(),
        cache       : false,
        dataType    : 'jsonp',
        contentType: "application/json; charset=utf-8",
        error       : function(err) { console.log('error') },
        success     : function(data) {
        if (data.result != "success") {
            console.log('success');
        } else {
            console.log('not success');
            //formSuccess();
        }
        }
    });
    }

    jQuery(document).on('submit', '.footer-newsletter-form', function(event) {
        try {
            var $form = jQuery(this);
            event.preventDefault();
            register($form);
        } catch(error){}
    });
});
</script>

提交正确。但是，当我按下提交按钮时，我预计页面不会刷新，当我检查浏览器控制台时，我会看到 "success" 或 "not success"。相反，我被发送到显示以下 JSON 消息的页面：?({"result":"success","msg":"Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you."})。

那么我如何获取该成功消息（如果有错误则为错误）并使页面不仅保持原样，而且还捕获成功消息以便我可以显示 "Success" 警报？我知道该怎么做的成功警报。我只需要帮助让浏览器保持原样并告诉我成功和错误之间的区别。

P.S。我不确定这是否相关，但平台是 Shopify。我不认为 Shopify 会做任何事情来阻止提交正常进行或响应返回，所以我认为它不相关。

Answer 1

整个问题是 $(document).ready(function () {}); 部分。由于某种我不知道的原因导致 event.preventDefault();来自运行的方法，表单会定期提交。如果您删除 $(document).ready(function () {}); 部分，它将按预期工作。

我给所有期待未来的人的最终代码：

表格：

<form class="footer-newsletter-form" method="POST" id="footer-newsletter" action="https://xxxxxxxxxxxxx.us1.list-manage.com/subscribe/post-json?c=?">
   <input type="hidden" name="u" value="xxxxxxxxxxxxxxxxxxxxxxxxxxx">
   <input type="hidden" name="id" value="xxxxxxxxxx">
   <input id="email" name="EMAIL" type="email" class="input-text required-entry validate-email footer__newsletter-field">
   <button type="submit" title="Subscribe" class="button button1 hover-white footer__newsletter-button">SUBSCRIBE</button>
   <div id="subscribe-result"></div>
</form>

和 JS：

<script>
    function register($form) {
      $.ajax({
        type: "GET",
        url: $form.attr('action'),
        data: $form.serialize(),
        cache: false,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        error: function (err) {
          console.log('error')
        },
        success: function (data) {
          if (data.result != "success") {
            console.log('Error: ' + data.msg);
          } else {
            console.log("Success");
             $($form).find("div#subscribe-result").html("<p class='success-message'>Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you!</p>"); 
             setTimeout(function() {  $($form).find("div#subscribe-result").hide(); }, 7000);
          }
        }
      });
    }

    $(document).on('submit', '#footer-newsletter', function (event) {
      try {
        var $form = jQuery(this);
        event.preventDefault();
        register($form);
      } catch (error) {}
    });
</script>

Mailchimp 通过 jQuery Ajax。提交正确，但 JSON 响应作为单独的页面返回

Mailchimp via jQuery Ajax. Submits correctly but JSON response is returned as a separate page

javascript

jquery

json

ajax

mailchimp