gpt4 book ai didi

javascript - 如何使用 JavaScript 发送请求并接收来自 REST API 的响应?

转载 作者:行者123 更新时间:2023-11-28 04:00:59 27 4
gpt4 key购买 nike

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

<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 发出请求时,它工作正常并返回身份验证 token 。

最佳答案

您向服务器发出的请求是异步的,因此您的代码不能立即获取响应。这是使用回调完成的:

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

关于javascript - 如何使用 JavaScript 发送请求并接收来自 REST API 的响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47118618/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com