結果を表示するHTMLページの作成

この項では、データベースから取得した従業員のリストを表示するHTMLページを作成するステップについて説明します。

クラス名:src/main/webapp/listAll.html

HTMLページを作成するステップ:

HTMLページのtitle、stylesheetおよびbodyを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List all Employees</title>
<link rel="stylesheet" type="text/css" href="css/app.css" >
</head>

< script>タグ内で、URLおよびHTTPRequestの変数をいくつか宣言します。
```
<script>
var xmlhttp = new XMLHttpRequest();
var url = "WebController";
```

リクエストの送信時、つまり各機能のリンクが選択されたときに実行するアクションを定義します。


xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       processResponse(xmlhttp.responseText);
     }
   }
xmlhttp.open("GET", url, true);
xmlhttp.send();

HTMLページにJSON結果を表示するには、関数processResponse()を作成します。


function processResponse(response) {
// Process the JSON response into an array.   
var arr = JSON.parse(response);
var i;
var out - "<table>";
keys = Object.keys(arr[0]);
//Print headers
out += "<tr>"
for(i = 0; i < keys.length; ++i) {
  out += "<th>"+keys [i]+"</th>"
}
out += "</tr>";
// Print values
for(j = 0; j < arr.length; j++) {  
  out += "<tr>"
  for(i = 0; i < keys.length; ++i) {
    out += "<td>"+arr[j][keys[i]]+"</td>"
  }
out += "</tr>"
}
out += "</table>";
document.getElementById("id-emp").innerHTML = out;
}