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

哪个正确提交。但是，当我按下提交按钮时，我希望发生的事情是页面不刷新，当我检查浏览器控制台时，我会看到"成功"或"不成功"。相反，发生的情况是我被发送到显示以下 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 会做任何事情来阻止提交按预期进行或返回响应，因此我认为这无关紧要。

Answer 1

整个问题是$(document).ready(function () {});部分。出于某种原因，我不知道导致事件.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>