project/query13.html at master · titat/project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
	<body>
		<h1>Data analysis</h1>
		<h2>Percentage of students that take each preliminary courses, group by department</h2>
		<div id="result">
		</div>
		<script>
		var tableHead = "<table border=\"1px\">";
		var columnHead = "<tr><th align=\"center\">Department</th><th align=\"center\">CourseName</th><th align=\"center\">Percentage of Students</th></tr>";
		var columnData = "";
		var tableEnd = "</table>";
		loadData();
			function loadData(){
				var xmlhttp = new XMLHttpRequest();
				var url = "http://127.0.0.1:80/project/getQuery13.php";

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

			function displayResponse(response) {
			var arr = JSON.parse(response);
			var i;
			columnData = "";
				for(i = 0; i < arr.length; i++) {
					columnData += "<tr><td align=\"center\">"+arr[i].DepartmentName+"</td><td align=\"center\">"+arr[i].CourseName+"</td><td align=\"center\">"+arr[i].percent+"</td></tr>"
				}
				document.getElementById("result").innerHTML = tableHead+columnHead+columnData+tableEnd;
			}

		</script>
	</body>
</html>