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

日本語PDF

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

クラス名:

src/main/webapp/listAll.html

Githubの場所: listAll.html

説明: データベースから取得した結果を表示するHTMLページです。

実行する手順:

手順11: HTMLページのtitle、stylesheetおよびbodyを作成します

手順12: <script>タグを開始してGETリクエストを処理します

手順13: JSONレスポンスを処理して結果をHTMLページに表示するメソッドprocessResponse()を作成します。

手順11: HTMLページのtitle、stylesheetおよびbodyを作成する手順:

1. 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> <body>

手順12: GETリクエストを処理する手順:

1. <script>タグを開始し、URLおよびHTTPRequestの変数を宣言します。

<script>

var xmlhttp = new XMLHttpRequest();

var url = "WebController";

2. リクエストの送信時、つまり各機能のリンクが選択された場合のアクションを定義します。

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

手順13: processResponse()リクエストを処理する手順:

1. 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;

}