如何使用 javascript 从 REST API 发送请求和接收响应？答案

【问题标题】：How do I send request and recieve response from REST API using javascript?如何使用 javascript 从 REST API 发送请求和接收响应？
【发布时间】：2018-04-17 12:49:20
【问题描述】：

我的计算机上运行有一个本地服务器，它具有内置的 REST API。 api 的基本 url 是：http://127.0.0.1:8090/ehr/api/v1。现在我想使用这个 api 为这个服务器创建一个客户端应用程序。要登录此服务器，api url 是 baseurl/login with POST 方法。它将用户名、密码和组织作为参数，如果登录成功，则返回 json 中的身份验证令牌。现在我想在 html 和 javascript 中创建一个表单，如果响应是身份验证令牌，它将询问用户名、密码、组织和登录用户，否则如果响应是错误而不是令牌，用户将无法登录in. 这个表单的 html 和 javascript 代码应该是什么？我输入了以下代码来输出身份验证令牌，但没有显示任何结果。甚至控制台日志都是空的。

<html>
<body>
    <div class="login">
    <h1>Login</h1>
    <form method="post">
        <input type="text" name="u" placeholder="Username" id="username" required="required" />
        <input type="password" name="p" placeholder="Password" id="password" required="required" />
        <input type="text" name="p" placeholder="Organization" id="organization" required="required" />
        <button type="submit" onclick="loginfunc()">Let me in.</button>

    </form>
    </div>
    <script>
        function loginfunc(){
            var baseurl = "http://localhost:8090/ehr/api/v1";
            var funcurl = "/login";
            var username = document.getElementById("username");
            var password = document.getElementById("password");
            var organization = document.getElementById("organization");
            var url = baseurl+funcurl+"?username="+username+"&password="+password+"&organization="+organization
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open( "POST", url, true); // false for synchronous request
            xmlHttp.send( null );
            var response = JSON.parse(xmlhttp.responseText);
            document.write(response)
        }
    </script>

</body></html>

编辑：我根据建议更改了登录功能：

function loginfunc(){
                var baseurl = "http://localhost:8090/ehr/api/v1";
                var funcurl = "/login";
                var username = document.getElementById("username");
                var password = document.getElementById("password");
                var organization = document.getElementById("organization");
                var url = baseurl+funcurl+"?username="+username+"&password="+password+"&organization="+organization;
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.onreadystatechange = function () {
                    if(xmlHttp.readyState === XMLHttpRequest.DONE && xmlHttp.status === 200) {
                        console.log(xmlHttp.responseText);
                    }
                };
                xmlHttp.open( "POST", url, true); // false for synchronous request              
                xmlHttp.send( null );
                document.write(xmlHttp.responseText);
            }

但现在我在 xmlHttp.send() 函数中收到 401 未经授权的错误。我不明白为什么当我使用像 insomnia 这样的 REST 客户端向同一个 url 发出请求时，它工作正常并返回身份验证令牌。

【问题讨论】：

查看 Nimrod 给出的答案，可以在 post 请求后使用回调执行代码。
请看问题中的编辑。

标签： javascript html json rest api

【解决方案1】：

您向服务器发出的请求是异步的，因此您的代码不能立即接受响应。这是使用回调完成的：

xmlHttp.onreadystatechange = function () {
  if(xmlHttp.readyState === XMLHttpRequest.DONE && xmlHttp.status === 200) {
    console.log(xmlHttp.responseText);
  }
};

【讨论】：

你能准确地说出我必须在代码中编辑什么，因为我完全不知道你刚刚写的这个回调概念。
如果您将我写的代码准确地放在您的xmlHttp.send(null) 之前，您应该会在控制台中看到响应。
您的服务器是否期待 POST？
是的，文档说明 /login 是一个 POST 请求
它希望 localhost:8090/ehr/api/v1/login 作为 url 和用户名、密码和组织作为 POST 请求中的参数。