- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我尝试使用 MailChimp 和 Ajax 创建一个简单的时事通讯注册来在后台处理事件。我的问题是它重定向到包含当前代码的页面。我怎样才能修复它,以便在完成后它只显示复选标记而不显示其他内容?我知道动画代码不在正确的位置,它就在那里,所以我可以在重定向之前看到它。
var subscribe_button = document.querySelector(".fi-mail");
subscribe_button.addEventListener('click', function(){
document.getElementById('ava-subscribe-form').submit();
subscribe_button.classList.remove("fi-mail");
subscribe_button.classList.add("fi-check");
});
function register($form) {
$.ajax({
type: $form.attr('method'),
url: '//https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post&id=0ae3f9ab0f&c=?',
data: $('#ava-subscribe-form').serialize(),
dataType: 'json',
cache : false,
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
alert(data.msg);
} else {
// It worked, carry on...
}
}
});
}
$(document).ready( function () {
var $form = $('ava-subscribe-form');
if ( $form.length > 0 ) {
$('form input[type="submit"]').bind('click', function ( event ) {
if ( event ) event.preventDefault();
register($form);
});
}
});
* {
-webkit-font-smoothing: antialiased;
font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
font-size: 15px;
color: rgba(255,255,255,0.6);
}
html {
background: linear-gradient(134.72deg, #EB4B92 0%, #CA76E3 100%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
text-align: center;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 0px;
-webkit-text-fill-color: rgba(255,255,255,0.6);
-webkit-box-shadow: 0 0 0px 1000px transparent inset;
transition: background-color 5000s ease-in-out 0s;
caret-color: rgba(255,255,255,0.6);
}
form {
background: transparent;
height: 50px;
width: 300px;
-webkit-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
top: 50%;
left: 50%;
position: absolute;
margin: -25px 0 0 -150px;
}
input {
background: transparent;
float: left;
padding: 14px 0;
border: 0;
outline: 0;
margin-left: 25px;
width: 220px;
}
form a {
float: right;
background: rgba(255,255,255,0.1);
border: 0;
line-height: 38px;
height: 38px;
width: 38px;
margin: 6px 6px 0 0;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(255,255,255,0.3);
font-size: 1.2em;
text-align: center;
cursor: pointer;
text-decoration: none;
}
form a:hover {
background: rgba(0,0,0,0.1);
}
form a.fi-check {
background: rgba(255,255,255,0.1);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
form a.fi-check:hover {
cursor: default;
}
.a-thing {
color: rgba(255,255,255,0.9);
font-weight: bold;
font-size: .9em;
text-shadow: 0 1px rgba(0,0,0,0.2);
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -195px;
}
.a-thing a {
color: rgba(255,255,255,0.2);
text-decoration: none;
}
.a-thing a:hover {
color: rgba(255,255,255,0.2);
}
@font-face {
font-family: "foundation-icons";
src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot");
src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.svg#GeneralFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
[class*="fi-"]:before {
font-family: "foundation-icons";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
display: inline-block;
}
.fi-check:before {
content: "\f126";
}
.fi-mail:before {
content: "\f16d";
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .2);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: rgba(0, 0, 0, .2);
opacity: .2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgba(0, 0, 0, .2);
opacity: .2;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(0, 0, 0, .2);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(0, 0, 0, .2);
}
::placeholder { /* Most modern browsers support this now. */
color: rgba(0, 0, 0, .2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post" method="POST" id="ava-subscribe-form">
<input type="hidden" name="u" value="9c9cbcbf400c4df4622eef40f">
<input type="hidden" name="id" value="0ae3f9ab0f">
<input type="email" placeholder="ava@example.com" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0">
<a type="submit" class="fi-mail"></a>
</form>
最佳答案
原因是您将 jquery 事件附加到错误的目标。
您可能会得到如下代码的预期结果。
html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="ava-subscribe-form">
<input type="hidden" name="u" value="9c9cbcbf400c4df4622eef40f">
<input type="hidden" name="id" value="0ae3f9ab0f">
<input type="email" placeholder="ava@example.com" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0">
<a href="javascript:void(0)" class="fi-mail"></a>
</form>
js
/* moved these code to jquery click
var subscribe_button = document.querySelector(".fi-mail");
subscribe_button.addEventListener('click', function(){
document.getElementById('ava-subscribe-form').submit();
subscribe_button.classList.remove("fi-mail");
subscribe_button.classList.add("fi-check");
});
*/
function register($form) {
$.ajax({
type: $form.attr('method'),
url: 'https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post-json?&c=?',
data: $('#ava-subscribe-form').serialize(),
dataType: 'json',
cache : false,
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
alert(data.msg);
} else {
// It worked, carry on...
}
}
});
}
$(document).ready( function () {
var $form = $('#ava-subscribe-form');
if ( $form.length > 0 ) {
$('a.fi-mail').bind('click', function () {
// not to do page transition, i changed event.preventDefault() to href="javascript:void(0)
$(this).removeClass('fi-mail').addClass('fi-check');
register($form);
});
}
});
关于javascript - Mailchimp Ajax 重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52674803/
有人有 Comet 应用程序 .net 的任何样本吗? 我需要一个示例如何在服务器中保持客户端的连接? 最佳答案 这里也有一些不错的: http://www.frozenmountain.com/we
我想知道是否有 Yii2 专家可以帮助我了解如何最好地使用 ajax 表单与 Yii ajax 验证相结合。我想我可以在不带您阅读我所有代码的情况下解释这个问题。 我正在处理一个促销代码输入表单,用户
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
f:ajax 和 a4j:ajax 标记之间有什么显着差异吗? 我知道 Richfaces 4 中的 a4j:ajax 基于 native f:ajax JSF2 标记,添加了一些 f:ajax 中未
我已经尝试过这样但无法获取数组列表。它返回“null” var data=[]; data[0] = '1'; data[1] = '2'; $.ajax({
在教程中可以看到 jQuery.ajax 和 $.ajax 喜欢这里 http://www.thekludge.com/form-auto-save-with-jquery-serialize/ jQ
过度使用 AJAX 会影响性能吗?在大型 Web 应用程序的上下文中,您如何处理 AJAX 请求以控制异步请求? 最佳答案 过度使用任何东西都会降低性能;在必要时使用 AJAX 将提高性能,特别是如果
似乎我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。 这是我的代码: {
我正在使用 Bottle 微框架(但我怀疑我的问题来自它) 首先,如果我定义了一个从/test_redirect 到/x 的简单重定向,它会起作用。所以 Bottle redirect() 在简单的情
任何人都可以指出各种 AJAX 库的统一比较吗?我已经阅读了大约十几种不同的书,我即将开始一个项目,但我对自己是否已经探索了可能性的空间没有信心。 请注意,我不是在要求“我认为 XXX 很棒”——我正
似乎使用 AJAX 的站点和应用程序正在迅速增长。使用 AJAX 的主要原因之一可能是增强用户体验。我担心的是,仅仅因为项目可以使用 AJAX,并不意味着它应该。 可能是为了 UX,AJAX 向站点/
假设我有一个可以通过 Javascript 自定义的“报告”页面。假设我有可以更改的 start_date、end_date 和类型(“简单”或“完整”)。现在 我希望地址栏始终包含当前(自定义) V
我一直在阅读 Ajax 并且希望从 stackoverflow 社区看到我是否正确理解所有内容。 因此,正常的客户端服务器交互是用户在 url 中拉出 Web 浏览器类型,并将 HTTP 请求发送到服
这可能有点牵强,但让我们假设我们需要它以这种方式工作: 我在服务器的 web 根目录中有一个 index.html 文件。该文件中的 javascript 需要向/secure/ajax.php 发出
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题?更新问题,以便 editing this post 可以用事实和引用来回答它. 去年关闭。 Improve this
我希望ajax post成功进入主页。由于某种原因,我一直做错事。知道我应该做什么来解决这个问题吗? window.APP_ROOT_URL = ""; Ajax $.ajax({ url: '#{a
我在 2 个不同的函数中有 2 个 ajax 调用。我想用.click来调用这2个函数。 func1 将数据插入数据库,然后 func2 检索数据,所以我的问题是如何等到 func1 完全完成然后只执
我试图在单击按钮后禁用该按钮。我尝试过: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true);
我试图在每个 Ajax 请求上显示加载动画/微调器 我的 application.js $(document).on("turbolinks:load", function() { window.
我正在显示使用jQplot监视数据的图形。 为了刷新保存该图的div,我每5秒调用一次ajax调用(请参见下面的JavaScript摘录)。 在服务器上,PHP脚本从数据库中检索数据。 成功后,将在5
我是一名优秀的程序员,十分优秀!