新版本的 Campaign Monitor 订阅代码的工作方式有所不同。如您所见,代码提供了一个负责发送数据的 js 文件(copypastesubscribeformlogic.js)。
发生了什么变化?
以前,订阅用户只是对 CM 端点的一个静态请求,并且很容易通过 ajax 请求订阅。现在,它需要两个单独的请求来订阅用户。第一个请求由 ajax 完成并由 CM 提供(js 文件 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 感谢页面。