Ajax 的经典 Asp 通讯订阅问题试图在不刷新页面的情况下获得加载程序和确认消息，我卡住了

Question

奇怪的行为

无论我如何组织代码：

1. 提交按钮使加载程序，然后即使您不填写 email 输入表也会出现确认消息
2. 有时刷新页面，有时不刷新

我想要的很简单：

a) 如果 email 输入表单未填写，则不要什么都不做，只期待 html5 输入验证消息。
b) 如果一切正常并且 email 输入正确填写，则显示加载程序，然后显示确认消息。

我连续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

Email 输入表格

<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>

Answer 1

你可以检查一下。

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
%>