我的计算机上运行的是本地服务器，该服务器具有内置的REST API。 api的基本URL是：http://127.0.0.1:8090/ehr/api/v1。现在，我想使用此API为此服务器创建客户端应用程序。要登录此服务器，API URL为baseurl /使用POST方法登录。如果登录成功，它将用户名，密码和组织作为参数，并在json中返回auth令牌。现在，我想用html和javascript创建一个表单，该表单将询问用户名，密码，组织并登录用户（如果response是auth令牌），否则，如果响应是错误而不是令牌，则用户将无法登录in。此表单的html和javascript代码应该是什么？我键入以下代码以输出auth令牌，但未显示任何结果。即使控制台日志为空。
<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未经授权的错误。我不明白为什么当我使用失眠之类的REST客户端向相同的URL请求时，它工作正常并返回auth令牌。
最佳答案
您对服务器的请求是异步的，因此您的代码不能仅立即获取响应。这是使用回调完成的：
xmlHttp.onreadystatechange = function () {
if(xmlHttp.readyState === XMLHttpRequest.DONE && xmlHttp.status === 200) {
console.log(xmlHttp.responseText);
}
};