Skip to content

GitLab

Commits (3)
Hide whitespace changes
Inline Side-by-side
index.htm
View file @ 3aa4125b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML miniREST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-reboot.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-grid.css">
<script src="main.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script>
var base_url="http://localhost:8080/webapi/";
</script>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML miniREST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-reboot.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-grid.css">
<script src="main.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script>
var base_url="http://localhost:8080/at.jku.ce/webapi/";
</script>
</head>
<body class="container">
<h1 class="h1">HTML miniREST</h1>
<div class="card mb-3">
<h2 class="card-header">Last request:</h2>
<div class="card-block p-3">
<pre class=""><span class="" id="last_req_method" style="font-size:1.5em">GET</span> <span class="" id="last_req_url">http://whatever.com/rest/json/students</span>
<span class="" id="last_req_options">-</span></pre>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="card mb-3">
<h2 class="card-header">Last response:</h2>
<div class="p-3 card-body bg-info ">
<pre class="text-white">Response code: <span class="" id="last_resp_code" style="font-size:1.5em">111 Irgendwas</span>
Response Body:
<span class="bg-light text-body" id="last_resp_body">-</span></pre>
</div>
</div>
</div>
</div>
<body>
<div class="container">
<h1 class="h1">HTML miniREST</h1>
<div class="row">
<div class="col alert alert-danger">
<!-- Hier Liste mit Studenten -->
<p>List of students: <input type="button" class="d-inline" value="Test" onclick="getStudList()"/> </p>
<select size="5" name="stud-list" id="stud-list" style="width:200px">
<option value="k00000001" >Student 1</option>
<option value="k00000002" >Student 2</option>
<option value="k00000003" >Student 3</option>
<option value="k00000004" >Student 4</option>
</select>
<div class="col alert alert-danger">
<!-- Hier Liste mit Studenten -->
<p>List of students: <input type="button" class="d-inline" value="Reload" onclick="getStudList()"/></p>
<select size="5" name="stud-list" id="stud-list" style="width:200px">
<option value="k00000001">Student 1</option>
<option value="k00000002">Student 2</option>
<option value="k00000003">Student 3</option>
<option value="k00000004">Student 4</option>
</select>
</div>
<div class="col alert alert-success">
<!-- Hier Studenten Details -->
<div class="col alert alert-success">
<!-- Hier Studenten Details -->
<form class="" id="student-details" style="display:none;" >
<p>Student <span id="student-id"></span> details:
<table>
<tr>
<td>
<label for="stu-first-name">First Name:</label>
</td>
<td>
<input id="stu-first-name" type="text" value="John">
</td>
</tr>
<tr>
<td>
<label for="stu-last-name">Last name:</label>
</td>
<td>
<input id="stu-last-name" type="text" value="Doe">
</td>
</tr>
</table>
</form>
</div>
<form class="" id="student-details" style="display:none;">
<p>Student <span id="student-id"></span> details:
<table>
<tr>
<td>
<label for="stu-first-name">First Name:</label>
</td>
<td>
<input id="stu-first-name" type="text" value="John">
</td>
</tr>
<tr>
<td>
<label for="stu-last-name">Last name:</label>
</td>
<td>
<input id="stu-last-name" type="text" value="Doe">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="row">
<div class="col">
<div class="card mb-3">
<div class="card-header"><span class="h4">Last request: </span><span class="" id="last_req_method" style="font-size:1.5em">GET</span> <span class="" id="last_req_url">http://whatever.com/rest/json/students</span></div>
<div class="card-body p-3">
<pre class=""><span class="" id="last_req_options">-</span></pre>
</div>
<h4 class="card-header">Last response:</h4>
<div class="p-3 card-body">
<p>Response code: <span class="" id="last_resp_code" style="font-size:1.5em">111 Irgendwas</span>
</p>
<p class="" style="text-decoration: underline">Response Body:</p>
<div style="line-height: 1;border: 1px solid gray">
<pre class="bg-white text-muted" id="last_resp_body"
style="font-size: 0.85em; line-height: 1em;">-</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
\ No newline at end of file
js/script.js
View file @ 3aa4125b
......@@ -37,11 +37,15 @@ function getStudList(){
"\r\n"+
"Response Header: "+jqXHR.getAllResponseHeaders()
);
$("#last_resp_code").removeClass("text-success");
$("#last_resp_code").addClass("text-danger");
},
complete: function(jqXHR, textStatus){
// Printing the last response
$("#last_resp_code").text(jqXHR.status+" "+jqXHR.statusText);
$("#last_resp_body").text(jqXHR.responseText);
$("#last_resp_code").removeClass("text-danger");
$("#last_resp_code").addClass("text-success");
$("#last_resp_body").text(JSON.stringify(JSON.parse(jqXHR.responseText), null, 2));
//alert("Ajax call done");
}
});
......@@ -86,7 +90,7 @@ function getStudent(stud_id){
complete: function(jqXHR, textStatus){
// Printing the last response
$("#last_resp_code").text(jqXHR.status+" "+jqXHR.statusText);
$("#last_resp_body").text(jqXHR.responseText);
$("#last_resp_body").text(JSON.stringify(JSON.parse(jqXHR.responseText), null, 2));
//alert("Ajax call done");
}
});
......