javascript - Ajax Vanilla JS - ajax 异步继续，无需等待 readState 4，状态 200-6ren

javascript - Ajax Vanilla JS - ajax 异步继续，无需等待 readState 4，状态 200

转载作者：行者123 更新时间：2023-12-02 22:08:40

TLDR:我想等待第一个请求完成，然后再继续执行第二个请求等。

<小时/>

你好，

我目前正在开发一个 HotSpot 页面。用户需要输入他的电子邮件，瞧!他可以访问互联网。

假设在后台发生的事情是，当用户插入他的电子邮件并按发送时；

使用用户名和密码向路由器发出 AJAX 异步 POST，

然后js/html页面等待来自路由器的readyState === 4 (DONE)响应，

向不同网络上的服务器发出 AJAX 异步 POST(这需要用户具有互联网连接)，该服务器向用户发送电子邮件，

然后js/html页面等待DONE响应

用户被重定向。

这基本上就是应该发生的事情。实际发生的情况是，JS 不会等待readyState === 4 和Status === 200。一旦用户单击“提交”，他就会立即重定向。

我无法使用 JQuery，因为路由器 (Mikrotik) 正在使用 $ 来达到其自身目的。

使用 F12 工具检查网络后，我可以看到到路由器的 POST 状态为 200，并且携带正确的参数 (username=HSuser&password=SimpleUserPassword)，并且我可以看到到服务器的 POST 有状态为 200，并且还具有正确的参数(电子邮件地址，即:Email=Ba%40loo.ns)。

我猜我的 JS 代码有些错误，因为它不等待。

此外，由于摆弄代码后的一些原因，没有更多电子邮件被插入到数据库中(之前是这样，不知道现在是什么问题。)

以下是当前代码。我还会发布以前的版本(也不起作用)，以防有人发现那里的问题。

如果有人需要任何其他信息，请告诉我。

谢谢。

<小时/>

编辑 3:

我继续阅读 Stack Overflow，偶然发现了这个 piece of information ...

The server is responsible for providing the status, while the user agent provides the readyState.

这是服务器端自动完成的，还是我需要以某种方式实现它？

<小时/>

编辑 1.:

我在这里尝试了控制台日志

                if (xhr.readyState === DONE){

                    console.log("XHR1" + xhr.readyState);
                    console.log("XHR1" + xhr.status);

                    if (xhr.status === OK){

这里

                            if (xhr2.readyState === DONE){

                                console.log("XHR2" + xhr2.readyState);
                                console.log("XHR2" + xhr2.status);

                                if (xhr2.status === OK){

我只得到了XHR1(XHR14和XHR1200)，我没有从XHR2得到任何东西。

<小时/>

编辑2.:

尝试用 onload 替换 onreadystatechange，仍然做同样的事情。

<小时/>

当前 HTML 代码:

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

<title>HotSpot</title>

</head>
<body>

    <!-- Email form which is saved into the 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="submit" value="Submit" id="submit_ok" name="submit_ok" /> <br />
    </form>

<script type="text/javascript">

document.getElementById("submit_ok").addEventListener("click", SendAjax);
    function SendAjax() {
        var email = document.getElementById("email").value;
        console.log(email);
        // Check if fields are empty 
        if (email=="") {
            alert("Please enter your email.");
        }
        // AJAX code to submit form
        else{
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://router/login', true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");

            xhr.onreadystatechange = function () {
                var DONE = 4;
                var OK = 200;
                if (xhr.readyState === DONE){
                    if (xhr.status === OK){
                        var xhr2 = new XMLHttpRequest();
                        xhr2.open('POST', 'http://server/insertDB.php', true);
                        xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
                        var useremail = document.getElementById("email").value;

                        xhr2.onreadystatechange = function () {
                            if (xhr2.readyState === DONE){
                                if (xhr2.status === OK){        
                                    location.href = "http://server/redirected.html";
                                }
                            }
                        }
                    }
                    xhr2.send("Email="+encodeURIComponent(useremail));
                }
            }
            xhr.send("username=HSuser&password=SimpleUserPassword");
        }
    };

</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 DB
            $stmt = $DB->prepare("INSERT INTO addresses (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();   
?>

之前的 HTML/JS 代码:

function SendAjax() {
    var email = document.getElementById("email").value;
    console.log(email);
    // Check if fields are empty 
    if (email=="") {
        alert("Please enter your email.");
    }
    // AJAX code to submit form
    else{
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://router/login', true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");

        xhr.onreadystatechange = function () {
            var DONE = this.DONE || 4;
            if (xhr.readyState === XMLHttpRequest.DONE){
                var xhr2 = new XMLHttpRequest();
                xhr2.open('POST', 'http://server/insertDB.php', true);
                xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
                var useremail = document.getElementById("email").value;

                xhr2.onreadystatechange = function () {
                    var DONE = this.DONE || 4;
                    if (xhr2.readyState === XMLHttpRequest.DONE) {
                        location.href = "http://server/redirected.html";
                    }
                };
                xhr2.send("Email="+encodeURIComponent(useremail));
            }
        }

        xhr.send("popup=true&username=HSuser&password=SimpleUserPassword");
    }
}

最佳答案

如果它让你的生活更轻松(而且它会)，你可以将 jQuery 置于无冲突模式。

<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    $j( "div" ).hide();
});

// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
    var mainDiv = $( "main" );
}

</script>

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

然后你就可以进行 AJAX 调用，并且应该等待的内容可以放入 success 函数中:

            $j.ajax({
                url: '/your-form-processing-page-url-here',
                type: 'POST',
                data: yourVariables,
                mimeType: 'multipart/form-data',
                success: function(data, status, jqXHR){
                    alert('Hooray! All is well.');
                    console.log(data);
                    console.log(status);
                    console.log(jqXHR);

                },
                error: function(jqXHR,status,error){
                    // Hopefully we should never reach here
                    console.log(jqXHR);
                    console.log(status);
                    console.log(error);
                }
            });

关于javascript - Ajax Vanilla JS - ajax 异步继续，无需等待 readState 4，状态 200，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59630438/

文章推荐： javascript - 使用 axios 时获取字节

文章推荐： javascript - Firebase DB 到 HTML 表

ios下载视频暂停/继续
我正在我的应用程序后台下载视频。如果用户在下载过程中重启了应用/设备，有什么方法可以在他们下次启动应用时从他们中断的地方继续下载？最佳答案这主要取决于文件服务器的配置(HTTP、FTP 等)。现
WPF 动画暂停/继续
我正在试验 WPF 动画，但有点卡住了。这是我需要做的: 鼠标悬停: 淡入(2 秒内从 0% 到 100% 不透明度) MouseOut: 暂停 2 秒淡出(2 秒内从 100% 到 0% 不透明度
Ant:将相同的文件集复制到多个位置 - 继续
我的问题是这个线程的延续: Ant: copy the same fileset to multiple places 我是映射器的新手。有人(carej？)可以分享一个使用映射器来做到这一点的例子吗
multithreading - 当主线程被阻塞时显示事件指示器(继续)
继续previous question我希望能够显示一些事件指示器即使主线程被阻塞。(基于this article)。基于所附代码的问题: 使用 Synchronize(PaintTargetWin
加载另一个页面后 JavaScript 继续
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
java - 让等待线程跳过剩余的等待/继续
我有一个场景，其中有一个线程在等待和执行任务之间循环。但是，我想中断线程的等待(如果愿意，可以跳过其余的等待)并继续执行任务。有人知道如何做到这一点吗？最佳答案我认为你需要的是实现 wait()
c# - 继续;用于跳过许多循环
这是我的代码架构: while (..) { for (...; ...;...) for(...;...;...) if ( )
java - 方法——继续
import java.util.Scanner; public class InteractiveRectangle { public static void main(String[] args)
python - 在具有功能的列表理解中“继续”
如何将 continue 放入具有函数的列表理解中？下面的示例代码... import pandas as pd l = list(pd.Series([1,3,5,0,6,8])) def inv
python - 我怎样才能让视频在录制时暂停/继续？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 6 年前。 Improve this qu
Python with 语句，继续
我正在用 python 开发一个程序，遇到了一个我不知道如何解决的问题。我的意图是使用 with 语句，避免使用 try/except。到目前为止，我的想法是能够使用 continue 语句，就像在
java - 继续/中断时不必要的标签
我对下一段代码的执行感到困惑: label: for (int i = 0; i < 100; i++) { if (i % 2 == 0) c
c - `` 继续 `` 中断标签放置
这很好用: #include int main(){ volatile int abort_counter = 0; volatile int i = 0; while (i
go - 继续-无法解析嵌套结构
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想改善这个问题吗？更新问题，以便将其作为on-topic
php foreach 继续
如果不满足某些条件，我会尝试跳到循环的下一次迭代。问题是循环仍在继续。我哪里出错了？根据第一条评论更新了代码示例。 foreach ($this->routes as $route =>
php foreach 继续
如果不满足某些条件，我会尝试跳到循环的下一次迭代。问题是循环仍在继续。我哪里出错了？根据第一条评论更新了代码示例。 foreach ($this->routes as $route =>
详解java线程的开始、暂停、继续
Android项目中的一个需求：通过线程读取文件内容，并且可以控制线程的开始、暂停、继续，来控制读文件。在此记录下。直接在主线程中，通过wait、notify、notifyAll去控制读文件的线
python - sys.getrefcount 继续
link text 我得到了引用计数的概念所以当我执行“del astrd”时，引用计数降为零并且 astrd 被 gc 收集？这是示例代码。这些代码是我在昨天的问题之后开发的:link text
excel - 出错时显示单元格地址和消息框并退出宏，如果没有，继续
我想首先检查我的 Range 是否有 #NA 错误，然后在退出宏之前显示包含错误的单元格地址。这是我到目前为止所做的。现在，如果出现错误，我想显示 MsgBox警告用户错误并停止程序的其余部分执行，
继续 while 循环直到 char == EOF
while( (c = fgetc(stdin)) != EOF ){ count++; if (count == lineLen - 1){ moreChars =

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Ajax Vanilla JS - ajax 异步继续，无需等待 readState 4，状态 200