JS Ajax 异步/等待 - 表单未提交

Question

我的发件人有问题。出于某种原因，当我提交表单时，电子邮件没有保存到数据库中。

我的 html/js 进行了两次 Async - Await Ajax 调用。第一个授予用户互联网访问权限（热点），而第二个将电子邮件保存到数据库中。路由器（热点）与服务器在不同的网络上。

请注意，第一个 xhr 有效（用户可以访问互联网），第二个表格报告 XHR2 4 和 XHR2 200，但电子邮件未保存到数据库中。

我（目前）正在使用 XAMPP，如果这是相关的。我还在 httpd.config 文件中添加了 ServerName 10.30.20.30:80。

如果我可以提供任何其他信息，请告诉我。

如果能帮助解决这个问题，我们将不胜感激。

谢谢

HTML

<!DOCTYPE html>
<html>
<head>
<meta content="text/html" />
<meta charset="utf-8" />

<title>HotSpot</title>

</head>
<body>

    <!-- Form za mail, ki se spravi v DB -->
    <form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
        <h1>Hotspot</h1>
        <h2>To gain internet access, enter your email.</h2>
        <br />
        <input type="text" id="email" name="email" autofocus="autofocus" />
        <br />
        <input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
    </form>

<script type="text/javascript">

document.getElementById("submit_ok").addEventListener("click", sendAjax);

async function sendAjax() {
    let ax1 = await Ajax1 ("POST", "http://10.5.50.1/login")
    let ax2 = await Ajax2 ("POST", "http://10.30.20.30/Site/anti-xss.php")
}

function Ajax1 (method, url){
    return new Promise (function (resolve,  reject){
        let xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://10.5.50.1/login', true);
        xhr.onload = function(){
            if(this.status >= 200 && this.status < 300){
                resolve(xhr.response);
                console.log("Success!");
                console.log("You'r logged in.");
                console.log("XHR1 " + xhr.readyState);
                console.log("XHR1 " + xhr.status);
            }else{
                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });
            }
        };
        xhr.onerror = function (){
            reject({
                status: this.status,
                statusText: xhr.statusText
            });
        };
        xhr.send("username=HSuser&password=SimpleUserPassword");
    });
}

function Ajax2 (method, url){
    return new Promise (function (resolve, reject){
        let xhr2 = new XMLHttpRequest();
        xhr2.open('POST', 'http://10.30.20.30/Site/anti-xss.php', true);
        xhr2.onload = function(){
            if(this.status >= 200 && this.status < 300){
                resolve(xhr2.response);
                console.log("Success!");
                console.log("You'r email is " + useremail + ".");
                console.log("XHR2 " + xhr2.readyState);
                console.log("XHR2 " + xhr2.status);
            }else{
                reject({
                    status: this.status,
                    statusText: xhr2.statusText
                });
            }
        };
        xhr2.onerror = function (){
            reject({
                status: this.status,
                statusText: this.statusText
            });
        };
        let useremail = document.getElementById("email").value;                 
        xhr2.send("Email="+encodeURIComponent(useremail));
    });
}

</script>   
</body>
</html>

PHP

<?php

    require ('connect.php');

    $clean_email = "";
    $cleaner_email = "";


    if(isset($_POST['Email']) && !empty($_POST['Email'])){
        //sanitize with filter
        $clean_email = filter_var($_POST['Email'], FILTER_SANITIZE_EMAIL);
        //sanitize with test_input
        $cleaner_email = test_input($clean_email);
        //validate with filter
        if (filter_var($cleaner_email,FILTER_VALIDATE_EMAIL)){
            // email is valid and ready for use
            echo "Email is valid";  
            //Email is a column in the Database
            $stmt = $DB->prepare("INSERT INTO naslovi (Email) VALUES (?)");
            $stmt->bind_param("s", $cleaner_email);
            $stmt->execute();
            $stmt->close();
        } else {
            // email is invalid and should be rejected
            echo "Invalid email, try again";
        } 
    } else {
    echo "Please enter an email";
    }

    function test_input($data) {
      $data = trim($data);
      $data = stripslashes($data);
      $data = htmlspecialchars($data);
      return $data;
    }

    $DB->close();   
?>

Answer 1

将 getRequestHeader 添加到 XHR2 并在 XHR1 调用和 XHR2 调用之间添加半秒的延迟后，一切似乎都正常。

谢谢@ADyson，你的帮助非常宝贵=)

JS Ajax 异步/等待 - 表单未提交

JS Ajax Async / Await - Form does not get submitted

html

javascript

php

xampp