45 lines
1.3 KiB
HTML
45 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<title>Test Document</title>
|
|
<style>
|
|
body {
|
|
width: 640px;
|
|
margin: 64px auto;
|
|
font-family: Arial;
|
|
}
|
|
table { border-collapse: collapse; }
|
|
th, tr { border: 1px solid black; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h5>This is test page</h5>
|
|
<button type="button" onclick="displayInfo()">Test Button</button>
|
|
<div id="output"></div>
|
|
<script>
|
|
function displayInfo() {
|
|
alert('function is running...');
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = funtion() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
console.log('response received');
|
|
var data = JSON.parse(this.responseText),
|
|
keys = Object.keys(data), len = keys.length,
|
|
content = '<table><tr>';
|
|
for (var i = 0; i < len; i++) {
|
|
content += '<th>' + keys[i] + '</th>';
|
|
if (i == len) content += '</tr><tr>';
|
|
}
|
|
for (var j = 0; j < len; j++) {
|
|
content += '<td>' + data[keys[j]] + '</td>';
|
|
if (j == len) content += '</tr></table>';
|
|
}
|
|
document.getElementById('output').innerHTML = content;
|
|
}
|
|
};
|
|
xhttp.open('GET', 'test.json', true);
|
|
xhttp.send();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|