JS Ajax Async / Await - 未提交表单答案

【问题标题】：JS Ajax Async / Await - Form does not get submittedJS Ajax Async / Await - 未提交表单
【发布时间】：2020-04-29 22:54:36
【问题描述】：

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

我的 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();   
?>

【问题讨论】：

"当我提交表单时，电子邮件没有保存到数据库中。"....在这两件事之间可能会出现很多问题。你需要缩小问题的范围。您了解如何使用浏览器的开发者工具来调试 AJAX 请求吗？你有没有在 PHP 中打开错误日志来捕捉那里的任何异常和警告？当 SQL 错误发生时，你有设置 mysqli 来抛出异常吗？附：如果我不得不猜测，因为您正在为第二个 AJAX 请求访问不同的 IP 地址，我想您可能在某个地方遇到了 CORS 错误。
嘿。感谢您的回复。不，我没有打开 PHP 或 SQL 错误记录。你能告诉我在哪里/怎么做吗？我用的是F12工具，没有CORS错误，连接php有header('Access-Control-Allow-Origin: *');
通常情况下，CORS 完全发挥作用所需的内容比所需的要多一些，但如果您在控制台中没有看到任何关于它的错误，那么也许没问题。
在 PHP 中启用错误报告/日志记录，并启用 mysqli 异常报告，很容易用谷歌搜索，但无论如何你都可以：stackify.com/php-error-logs-guide 和 stackoverflow.com/a/14578644/5947043
P.S.顺便说一句，还有：stackoverflow.com/a/4559976/5947043（用于您的if 声明）

标签： javascript php html xampp

【解决方案1】：

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

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

【讨论】：