-
Notifications
You must be signed in to change notification settings - Fork 1
/
7_6_jqAJAX.html
109 lines (77 loc) · 3.27 KB
/
7_6_jqAJAX.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rancho|Archivo-Black|Passero+One&effect=emboss">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
h2{
background-color: lightgrey;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid text-center" style="background-color:coral;min-height:250px;">
<h1>jQuery for AJAX</h1>
</div>
<div id="ajax" class="container">
<h2 onclick="loadDoc()">Click here to run loadDoc()</h2>
<div id="ajaxtest">Original Content</div>
<h2 onclick="loadJSON()">Click here to run loadjson()</h2>
<div id="jsontest">Original Content</div>
<h2>The table is loaded automatically by jquery getJSON()</h2>
<div id="jsontest2"></div>
</div>
<footer class="container-fluid" style="min-height:500px;background-color:gainsboro;"></footer>
<script>
$(document).ready(function() {
// assets/uv.json
$.getJSON("data/uv.json", function(result) {
var items = []
$.each(result, function(i, data) {
items.push("<tr><td>" + data['SiteName'] +
"</td><td>" + data['UVI'] +
"</td><td>" + data['County'] + "</td></tr>");
});
$("<table />", {
'class': "table table-condensed",
html: items.join("")
}).appendTo("#jsontest2")
});
});
var obj = JSON.parse("data/uv.json");
console.log(obj);
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ajaxtest").innerHTML = this.responseText;
}
};
xhttp.open("GET", "data/toload.txt", true);
xhttp.send();
}
function loadJSON() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
var out = "<table class='table table-condensed'><thead><tr><th>SiteName</th><th>UVI</th><th>County</th></tr></thead><tbody>";
for (var i = 0; i < obj.length / 2; i++) {
out += "<tr><td>" + obj[i]['SiteName'] +
"</td><td>" + obj[i]['UVI'] +
"</td><td>" + obj[i]['County'];
}
out += "</td></tr></tbody></table>"
document.getElementById("jsontest").innerHTML = out;
}
};
xhttp.open("GET", "data/uv.json", true);
xhttp.send();
}
</script>
</body>
</html>