时间戳

首页 > 解决方案 > xhttp.open() onreadystatechange 在 send() 之后没有发出警报就不会触发

javascript - xhttp.open() onreadystatechange 在 send() 之后没有发出警报就不会触发

问题描述

我正在尝试从我的服务器获取一个 json 字符串并对其进行解析。一切正常，除了我的 onreadystatechange 仅在我在 .send() 方法之后发出警报时触发。如果没有警报，服务器并不总是收到“GET”请求。我发现解决问题的唯一方法是在 open() 上将 async 设置为 false。如果代码是异步编写的，我更喜欢。

function collectData(){
    var user = document.forms["search"]["user"].value;
    if (user !== ""){
        var url = 'http://localhost:3000/users/'.concat('', user);
        var xhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xhttp=new XMLHttpRequest();
        }
        else{// code for IE6, IE5
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && (this.status == 200 || this.status == 304)) {
                var response = JSON.parse(xhttp.responseText);
                alert(response.data[0].id);
            }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
        alert(url);
    } else {
        alert("Name must be filled out");
        return false;
    }
}

我只想能够提醒 response.data[0].id

编辑：添加更多代码来重新创建场景。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/script.js"></script>
    <title>Exsisting Customer</title>
</head>
<body>
    <form name="search" onsubmit="return collectData()">
        Search customer:<br>
        <input type="text" name="user"><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

标签： javascriptasynchronousxmlhttprequest

解决方案

您正在提交表单，因此一旦onsubmit功能完成，浏览器就会开始导航到新页面。这可能会完全取消 Ajax 请求，但如果没有，它肯定会破坏等待响应的 JavaScript 环境。

您需要留在同一页面上以使用 JS 处理响应。

使用您当前采用的方法，您应该return false从collectData. 您应该考虑转向现代 JS 并addEventListener使用event.preventDefault.

推荐阅读