活动监视器表单不断重定向

Question

新版本的活动监视器订阅代码的工作方式不同。如您所见，代码提供了一个 js 文件(copypastesubscribeformlogic.js)，它负责发送数据。

发生了哪些变化？

以前，只需向 CM 端点发出一个静态请求即可订阅用户，并且很容易使 ajax 请求订阅。现在，它需要两个单独的请求来订阅用户。第一个请求由 ajax 完成，由 CM 提供(js file copypastesubscribeformlogic.js 处理此请求)。

我的问题：我想在不刷新或重定向的情况下在表单的同一页面上加载成功消息，但它不断重定向到默认的 CM 感谢页面。

我的表格：

<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="XXXX-XXX-XX-X">
<p>       
<input placeholder="Full Name" id="fieldName" name="cm-name" type="text" />
</p><br/>
<p>        
<input placeholder="Email" id="fieldEmail" class="js-cm-email-input" name="cm-fhutty-fhutty" type="email" required /> 
</p><br/>
<p>
<label for="fieldeihjlu">How did you hear of us?</label><br />
<select  id="fieldeihjlu" name="cm-fo-eihjlu">
<option value="1985454">Word of Mouth</option>
<option value="1985450">Social Media</option>
<option value="1985451">Press</option>
<option value="1985452">Web Search</option>
<option value="1985453">Sales and Marketing Activities</option>            
</select>
</p>
<p>         
<input class="js-cm-submit-button" type="submit" value="Submit">
</p>
</form>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>

成功消息(与表单页面相同)：

<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>

然后根据这个链接，我添加了以下js：

var campaign = (function (c, d, $) {
var body,
form,
form_id,
config,
successMessage;
c.init = function () {
body = $('body');
form = body.find('#' + config.formSelector);
form_id = form.attr('data-id');
successMessage = $('#' + config.successSelector);
successMessage.hide();
// On form submit.
form.submit(function (evt) {
// Disable default form submit.
evt.preventDefault();
// Get e-mail value.
email = $('input[type=email]', form).val();
// Build request data for tokenRequest.
request_data = "email=" + encodeURIComponent(email) + "&data=" + form_id;
// Prepare tokenRequest.
tokenRequest = new XMLHttpRequest();
tokenRequest.open('POST', 'https://createsend.com//t/getsecuresubscribelink', true);
tokenRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
tokenRequest.send(request_data);
// Ready state.
tokenRequest.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 200) {
// Having token and new submit url we can create new request to subscribe a user.
subscribeRequest = new XMLHttpRequest();
subscribeRequest.open('POST', this.responseText, true);
subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
subscribeRequest.send(form.serialize());
// On ready state call response function.
subscribeRequest.onreadystatechange = function() {
c.response(subscribeRequest);
}
} else {
c.response(tokenRequest);
}
}
}
});
};
// Handle ajax response.
c.response = function(request) {
if (request.readyState === 4) {
if (request.status === 200) {
successMessage.show('slow');
} else {
form.prepend('<p class="error">' + config.errorMessage + '</p>');
}
}
};
// Private
config = {
formSelector: 'form',
errorMessage: 'There was a problem submitting this form. Please try later.',
successSelector: 'success',
};
return c;
}(campaign || {}, {}, jQuery));
(function () {
campaign.init();
})(jQuery);

*在页面加载时，我没有收到任何Console错误。

*提交时我收到错误：Refused to execute script from https://www.createsend.com/t/subscribeerror?description=..... because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled，

但随后它仍然执行到默认的 CM 感谢页面。

Answer 1

所以基本上它做调用，然后显示消息。只是为了记住更新脚本(下半部分)var successMessage = $('#success'); var form = $('#subForm')中的id。

没有使用新的CM更新进行测试，但这对我有用。

.CSS

#success {display: none;}

HTML/js：

<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>

<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="XXXX-XXX-XX-X">
<p>       
<input placeholder="Full Name" id="fieldName" name="cm-name" type="text" />
</p><br/>
<p>        
<input placeholder="Email" id="fieldEmail" class="js-cm-email-input" name="cm-fhutty-fhutty" type="email" required /> 
</p><br/>
<p>
<label for="fieldeihjlu">How did you hear of us?</label><br />
<select  id="fieldeihjlu" name="cm-fo-eihjlu">
<option value="1985454">Word of Mouth</option>
<option value="1985450">Social Media</option>
<option value="1985451">Press</option>
<option value="1985452">Web Search</option>
<option value="1985453">Sales and Marketing Activities</option>            
</select>
</p>
<p>         
<input class="js-cm-submit-button" type="submit" value="Submit">
</p>
</form>


<script type="text/javascript" >
! function(e) {
var t = {};
function n(o) {
if (t[o]) return t[o].exports;
var r = t[o] = {
i: o,
l: !1,
exports: {}
};
return e[o].call(r.exports, r, r.exports, n), r.l = !0, r.exports
}
n.m = e, n.c = t, n.d = function(e, t, o) {
n.o(e, t) || Object.defineProperty(e, t, {
configurable: !1,
enumerable: !0,
get: o
})
}, n.r = function(e) {
Object.defineProperty(e, "__esModule", {
value: !0
})
}, n.n = function(e) {
var t = e && e.__esModule ? function() {
return e.default
} : function() {
return e
};
return n.d(t, "a", t), t
}, n.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}, n.p = "", n(n.s = 1)
}([function(e, t) {
var n;
"function" != typeof(n = window.Element ? window.Element.prototype : window.HTMLElement.prototype).matches && (n.matches = n.msMatchesSelector || n.mozMatchesSelector || n.webkitMatchesSelector || function(e) {
for (var t = (this.document || this.ownerDocument).querySelectorAll(e), n = 0; t[n] && t[n] !== this;) ++n;
return Boolean(t[n])
}), "function" != typeof n.closest && (n.closest = function(e) {
for (var t = this; t && 1 === t.nodeType;) {
if (t.matches(e)) return t;
t = t.parentNode
}
return null
}),
function() {
var e, t, n, o = document.documentElement || document.body;
o.getAttribute("data-cm-hook") || (t = "submit", n = function(e) {
var t = e.target.closest(".js-cm-form");
t && (e.preventDefault ? e.preventDefault() : e.returnValue = !1, function(e, t, n) {
var o = n.querySelector(".js-cm-email-input"),
r = "email=" + encodeURIComponent(o.value) + "&data=" + encodeURIComponent(n.getAttribute("data-id")),
c = new XMLHttpRequest;
c.onreadystatechange=function(){
if (this.readyState === 4) {
if (this.status === 200) {
// Having token and new submit url we can create new request to subscribe a user.
var successMessage = $('#success');
var form = $('#subForm')
subscribeRequest = new XMLHttpRequest();
subscribeRequest.open('POST', this.responseText, true);
subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
subscribeRequest.send($("#subForm").serialize());
// On ready state call response function.
subscribeRequest.onreadystatechange = function() {
form.hide('fast');
successMessage.show('fast');
}
} else {
alert("error");
}
}
}, c.open(e, t, !0), c.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), c.send(r)
}("POST", "https://createsend.com//t/getsecuresubscribelink", t))
}, (e = o).addEventListener ? e.addEventListener(t, n) : e.attachEvent("on" + t, n), o.setAttribute("data-cm-hook", "1"))
}()
}, function(e, t, n) {
e.exports = n(0)
}]);

</script>