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

Posted 2023-03-24

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

【英文标题】：Mailchimp via jQuery Ajax. Submits correctly but JSON response is returned as a separate page

【发布时间】：2018-01-10 11:25:21

【问题描述】：

我有以下表格：

<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.")。

那么，我如何获取成功消息（如果出现错误则为错误）并让页面不仅保持原样，而且还捕获成功消息，以便显示“成功”警报？成功警报我知道该怎么做。我只需要帮助让浏览器保持原位并分辨成功与错误之间的区别。

附：我不确定这是否相关，但平台是 Shopify。我认为 Shopify 没有采取任何措施来阻止提交按应有的方式通过或响应返回，因此我认为这无关紧要。

【问题讨论】：

查看你的数据类型 dataType : 'jsonp', to dataType : 'json',

在上面添加这一行 try in sumit event.preventDefault();

@Shibon 这些都不起作用。

【参考方案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>