1
REST APIが組み込まれた自分のコンピュータ上でローカルサーバーを実行しています。 APIのベースURLはhttp://127.0.0.1:8090/ehr/api/v1です。今私は、このAPIを使用してこのサーバーのクライアントアプリケーションを作成したいと思います。このサーバにログインするには、api urlはPOSTメソッドでbaseurl/loginです。ログインに成功すると、ユーザ名、パスワード、および組織がパラメータとして使用され、jsonでauthトークンが返されます。今私はhtmlとjavascriptでフォームを作成して、レスポンスが認証トークンであればユーザー名、パスワード、組織名、ログを尋ねます。そうでない場合、トークンではなくエラーで応答した場合、ユーザーはログに記録できませんこのフォームのhtmlコードとjavascriptコードはどうすればいいですか？ authトークンを出力するために次のコードをタイプしましたが、結果は表示されませんでした。コンソールログも空です。javascriptを使用してREST APIからリクエストを送信し、レスポンスを受信するにはどうすればよいですか？
<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);
}
Nimrodによって与えられた回答を参照してください。コールバックを使用してポストリクエスト後にコードを実行することができます。 – Adrian
質問を編集してください。 – dreadedHarvester