Javascript 为什么在表单数据提交中使用模糊事件而不是提交?
我在读克拉维约的书。它用于提交表单数据的javascript是:Javascript 为什么在表单数据提交中使用模糊事件而不是提交?,javascript,jquery,ajax,Javascript,Jquery,Ajax,我在读克拉维约的书。它用于提交表单数据的javascript是: <script type="text/javascript"> $("input[name='contact[email]']").on('blur', function(e) { e.preventDefault(); var email = $(this).val(); var settings = { "async": true,
<script type="text/javascript">
$("input[name='contact[email]']").on('blur', function(e) {
e.preventDefault();
var email = $(this).val();
var settings = {
"async": true,
"crossDomain": true,
"url": "https://manage.kmail-lists.com/subscriptions/external/subscribe",
"method": "POST",
"headers": {
"content-type": "application/x-www-form-urlencoded",
"cache-control": "no-cache"
},
"data": {
"g": "LIST_ID",
"$fields": "$source",
"email": email,
"$source": "Shopify form"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
});
});
</script>
$(“输入[name='contact[email]']”)。在('blur',函数(e)上){
e、 预防默认值();
var email=$(this.val();
变量设置={
“异步”:true,
“跨域”:正确,
“url”:”https://manage.kmail-lists.com/subscriptions/external/subscribe",
“方法”:“发布”,
“标题”:{
“内容类型”:“应用程序/x-www-form-urlencoded”,
“缓存控制”:“无缓存”
},
“数据”:{
“g”:“列表ID”,
“$fields”:“$source”,
“电子邮件”:电子邮件,
$source:“Shopify表单”
}
};
$.ajax(设置).done(函数(响应){
控制台日志(响应);
});
});
我想知道为什么它使用“模糊”事件而不是用户点击“提交”按钮来触发ajax功能。我认为有了这段代码,如果用户在没有点击“注册”或“提交”的情况下过早地退出表单的文本框,数据就会被提交 当元素失去焦点并且可能在“输入”电子邮件并发送后触发模糊事件。这通常对从衰减进行转换很有帮助 “我想知道为什么它使用“模糊”事件而不是用户点击“提交”按钮来触发ajax功能。” 因为这两种方式会给你两种不同的行为。非常简单:
click
事件时,该功能将在单击按钮后执行blur
事件时,该函数将在输入失去焦点后执行我不明白这是如何“有助于从辍学转换”?你能解释一下吗?此外,如果用户在键入电子邮件时意外地点击了tab,我们不会得到一些无用的信息吗?顺便说一句,我在代码中没有看到验证。如果用户开始填写输入字段并输入他们的电子邮件地址,您可以在键入电子邮件并从元素失去焦点触发模糊事件后立即发送电子邮件。是的,你是对的,标签可能会被点击,但这不起作用。这些信息可能有助于保留放弃并决定不点击“提交”按钮的用户。不过我会再看看他们的代码。