xhttp.open () onreadystatechange не запускается без предупреждения после send () - PullRequest
0 голосов
/ 09 июля 2019

Я пытаюсь получить строку json с моего сервера и проанализировать ее. Все работает, за исключением того, что мой onreadystatechange срабатывает, только если я ставлю предупреждение после метода .send (). Без предупреждения сервер не всегда получает запрос «GET». Единственный способ, который я нашел, чтобы решить эту проблему - включить асинхронный режим в 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

edit: добавление кода для воссоздания сценария.

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

1 Ответ

0 голосов
/ 09 июля 2019

Вы отправляете форму, поэтому браузер начинает переход на новую страницу, как только функция onsubmit завершена.Это может полностью отменить запрос Ajax, но если это не так, это, безусловно, разрушает среду JavaScript, ожидающую ответа.

Вам нужно остаться на той же странице, чтобы обработать ответ с помощью JS.

При таком подходе вы должны return false из collectData.Вы должны рассмотреть возможность перехода на современный JS и использовать addEventListener и event.preventDefault.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...