javascript - Ajax 的经典 Asp 时事通讯订阅问题试图在不刷新页面的情况下获得加载程序和确认消息,我卡住了
问题描述
奇怪的行为
无论我如何组织代码:
- 提交按钮使加载程序,然后即使您不填写电子邮件输入表也会出现确认消息
- 有时刷新页面,有时不刷新
我想要的很简单:
a) 如果电子邮件输入表单未填写,则不要什么都不做,只期待 html5 输入验证消息。
b) 如果一切正常并且电子邮件输入正确填写,则显示加载程序,然后显示确认消息。
我连续3天,实验。我被困住了。
提前致谢
AJAX/JS
function ajaxFunction() {
var form = document.getElementById("contactForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('email_suscribe', handleForm);
var ajaxRequest;
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("loading").innerHTML = ''; // Hide the image after the response from the server
document.getElementById("ajaxDiv").innerHTML = xmlhttp.responseText;
}
}
document.getElementById("loading").innerHTML = '<img src="images/loading.gif" />'; // Set here the image before sending request
xmlhttp.open("GET", "includes/suscripcion.asp?email_suscribe=<%=request.form("email_suscribe")%>", true);
xmlhttp.send();
}
形式
<form id="contactForm" name="contactForm">
HTML
电子邮件输入表
<input name="email_suscribe" type="email" autocomplete="on" required="required" class="footer_suscribir" placeholder="Correo Electronico" maxlength="60">
提交按钮
<button name="submit" onclick="ajaxFunction();" class="footer_suscribete"><strong>Suscribete</strong></button>
装载机
<span id="loading"></span>
实时确认信息
<div id="ajaxDiv"></div>
解决方案
你可以检查一下。
HTML
<input name="email_suscribe" type="email" autocomplete="on" required="required" class="footer_suscribir" placeholder="Correo Electronico" maxlength="60">
<input type="button" onclick="subscribe()">
<span id="loading"></span>
<span id="ajaxDiv"></span>
JS
<script>
function subscribe() {
var email=$(".footer_suscribir").val()
if (isEmail(email)===true) {
$("#loading").fadeIn("fast")
$.ajax({
type: 'POST',
crossDomain: true,
url: "postdata.asp",
data: {
"email": email
},
success: function (resp) { //resp: return from postdata.asp
$("#ajaxDiv").html(resp)
$("#loading").fadeOut("fast")
},
error: function (e) {
$("#ajaxDiv").html("AN ERROR OCCURRED")
$("#loading").fadeOut("fast")
}
});
}
else {
$("#ajaxDiv").html("EMAIL FORMAT ERROR")
}
}
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
</script>
POSTDATA.ASP
<%
'...
'DB CONNECTION
'...
' SAMPLE DB EXECUTION
email=request.form("email")
Set rsa=Server.CreateObject("Adodb.Recordset")
Sorgu="Select TOP 1 email from subscribers WHERE email='"&email&"'"
rsa.Open Sorgu, bag, 1, 3
if rsa.bof then
rsa.addnew
rsa("email")=email
rsa.update
response.write "SUCCESS"
else
response.write "ALREADY EXISTS"
end if
rsa.close
set rsa=nothing
%>
推荐阅读
- module - Odoo 14 覆盖方法
- node.js - 错误:nodejs中的“UnhandledPromiseRejectionWarning:错误:无效的消息选项”
- vim - 宏中替换失败后的vim替换
- electron - Electron:摆脱内容安全策略问题并允许 eval()
- c# - 遍历 Web 图片(Selenium、Windows 窗体、C#)
- model - Apache Wicket - 更新共享某个模型的所有组件的最佳方式
- python - 我需要根据窗口大小扩展标签
- docker - 清除所有内容的 Docker 命令
- mediawiki - 知道它们在哪个部分(或子部分)的 Mediawiki 模板?
- flutter - 有状态小部件未重建