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>

正确提交。但是，当我按下提交按钮时，我期望发生的是页面不刷新，当我检查浏览器控制台时，我会看到“成功”或“不成功”。相反，我发送的是一个显示以下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."})。

那么如何获取成功消息（或者如果出现错误则出错）并且页面不仅保持不变，而且还捕获成功消息，以便显示“成功”警告？成功提醒我知道怎么做。我只需要帮助浏览器保持原状，并告诉成功和错误之间的区别。

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响应作为单独页面返回

1 个答案: