|
@@ -1,232 +0,0 @@
|
1
|
|
-<!DOCTYPE html>
|
2
|
|
-<html lang="en">
|
3
|
|
-<head>
|
4
|
|
- <meta charset="UTF-8">
|
5
|
|
- <title>Title</title>
|
6
|
|
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
7
|
|
- <style media="screen">
|
8
|
|
- h2 {
|
9
|
|
- font-size: 1.2em;
|
10
|
|
- }
|
11
|
|
-
|
12
|
|
- #mainContent {
|
13
|
|
- display: inline-flex;
|
14
|
|
- }
|
15
|
|
-
|
16
|
|
- #displayContainer {
|
17
|
|
- width: 50%;
|
18
|
|
- }
|
19
|
|
- </style>
|
20
|
|
-</head>
|
21
|
|
-<body>
|
22
|
|
- <section id="mainContent">
|
23
|
|
-
|
24
|
|
-
|
25
|
|
- <section id="requestForms">
|
26
|
|
-
|
27
|
|
-
|
28
|
|
- <section>
|
29
|
|
- <h2>GET person list</h2>
|
30
|
|
- <button type="button" name="submitGetAll" onclick="getPeople()">Submit GET All</button>
|
31
|
|
- </section>
|
32
|
|
- <section>
|
33
|
|
- <h2>GET person by id</h2>
|
34
|
|
- <label for="getPersonId">Person ID:</label><input type="number" name="getPersonId" value="1" id="getPersonId"><br>
|
35
|
|
- <button type="button" name="submitGet" onclick="getPerson()">Submit GET</button>
|
36
|
|
- </section>
|
37
|
|
- <section>
|
38
|
|
- <h2>POST new Person:</h2>
|
39
|
|
-
|
40
|
|
- <label for="firstName">First Name:</label><input type="text" name="firstName" value="foo" id="postPersonFirstName"><br>
|
41
|
|
- <label for="lastName">Last Name:</label><input type="text" name="lastName" value="bar" id="postPersonLastName"><br>
|
42
|
|
- <button type="button" name="submitPost" onclick="postPerson()">Submit POST</button>
|
43
|
|
- </section>
|
44
|
|
-
|
45
|
|
- <section>
|
46
|
|
- <h2>PUT updated person</h2>
|
47
|
|
- <label for="putFirstName">First Name:</label><input type="text" name="putFirstName" value="Han" id="putPersonFirstName"><br>
|
48
|
|
- <label for="putLastName">Last Name:</label><input type="text" name="putLastName" value="Solo" id="putPersonLastName"><br>
|
49
|
|
- <label for="putId">ID:</label><input type="number" name="putId" value="" id="putPersonId"><br>
|
50
|
|
- <button type="button" name="submitPut" onclick="putPerson()">Submit PUT</button>
|
51
|
|
- </section>
|
52
|
|
-
|
53
|
|
- <section>
|
54
|
|
- <h2>DELETE person by ID</h2>
|
55
|
|
- <label for="delPersonId">Person ID:</label><input type="number" name="delPersonId" value="1" id="deletePersonId"><br>
|
56
|
|
- <button type="button" name="submitDelete" onclick="deletePerson()">Submit DELETE</button>
|
57
|
|
- </section>
|
58
|
|
- </section>
|
59
|
|
- <section id="displayContainer" >
|
60
|
|
- <div class="display" id="displayBox" >
|
61
|
|
- Nothing to Display
|
62
|
|
- </div>
|
63
|
|
-
|
64
|
|
- </section>
|
65
|
|
- </section>
|
66
|
|
-<script>
|
67
|
|
-
|
68
|
|
-function updateDisplay(content, header){
|
69
|
|
- var newContent = content;
|
70
|
|
- if(header != null){
|
71
|
|
- newContent = header + newContent;
|
72
|
|
- }
|
73
|
|
- document.getElementById("displayBox").innerHTML = newContent;
|
74
|
|
-}
|
75
|
|
-function postPerson(){
|
76
|
|
- // get values from fields
|
77
|
|
- var postFirstName = document.getElementById("postPersonFirstName").value;
|
78
|
|
- var postLastName = document.getElementById("postPersonLastName").value;
|
79
|
|
- var URI = "http://localhost:8080/people/";
|
80
|
|
- var requestType = "POST";
|
81
|
|
-
|
82
|
|
- var postData = JSON.stringify({
|
83
|
|
- "firstName": postFirstName,
|
84
|
|
- "lastName": postLastName
|
85
|
|
-});
|
86
|
|
- console.log("Requesting post for person:");
|
87
|
|
- console.log(postData);
|
88
|
|
- // send POST request
|
89
|
|
- var xhr = new XMLHttpRequest();
|
90
|
|
-xhr.withCredentials = true;
|
91
|
|
-
|
92
|
|
-xhr.addEventListener("readystatechange", function () {
|
93
|
|
- if (this.readyState === 4) {
|
94
|
|
- console.log(this)
|
95
|
|
- console.log(this.responseText);
|
96
|
|
- updateDisplay(this.responseText, requestType + URI + ":<br>");
|
97
|
|
- }
|
98
|
|
-});
|
99
|
|
-
|
100
|
|
-xhr.open(requestType, URI);
|
101
|
|
-xhr.setRequestHeader("content-type", "application/json");
|
102
|
|
-xhr.setRequestHeader("cache-control", "no-cache");
|
103
|
|
-// xhr.setRequestHeader("postman-token", "b11af5d0-9526-b27a-e6fc-a89dc4d348fc");
|
104
|
|
-
|
105
|
|
-xhr.send(postData);
|
106
|
|
- // update display with result
|
107
|
|
-}
|
108
|
|
-
|
109
|
|
-
|
110
|
|
-
|
111
|
|
-function putPerson(){
|
112
|
|
- // get values from fields
|
113
|
|
- // send POST request
|
114
|
|
- // update display with result
|
115
|
|
- // get values from fields
|
116
|
|
- var putFirstName = document.getElementById("putPersonFirstName").value;
|
117
|
|
- var putLastName = document.getElementById("putPersonLastName").value;
|
118
|
|
- var putId = document.getElementById("putPersonId").value;
|
119
|
|
- var URI = "http://localhost:8080/people/" + putId;
|
120
|
|
- var requestType = "PUT";
|
121
|
|
-
|
122
|
|
- var putData = JSON.stringify({
|
123
|
|
- "firstName": putFirstName,
|
124
|
|
- "lastName": putLastName,
|
125
|
|
- "id": putId
|
126
|
|
-});
|
127
|
|
- console.log("Requesting put for person:");
|
128
|
|
- console.log(putData);
|
129
|
|
- // send POST request
|
130
|
|
- var xhr = new XMLHttpRequest();
|
131
|
|
-xhr.withCredentials = true;
|
132
|
|
-
|
133
|
|
-xhr.addEventListener("readystatechange", function () {
|
134
|
|
- if (this.readyState === 4) {
|
135
|
|
- console.log(this)
|
136
|
|
- console.log(this.responseText);
|
137
|
|
- // updateDisplay(this.responseText);
|
138
|
|
- updateDisplay(this.responseText, requestType + URI + ":<br>");
|
139
|
|
- }
|
140
|
|
-});
|
141
|
|
-
|
142
|
|
-xhr.open(requestType, URI);
|
143
|
|
-xhr.setRequestHeader("content-type", "application/json");
|
144
|
|
-xhr.setRequestHeader("cache-control", "no-cache");
|
145
|
|
-// xhr.setRequestHeader("postman-token", "b11af5d0-9526-b27a-e6fc-a89dc4d348fc");
|
146
|
|
-
|
147
|
|
-xhr.send(putData);
|
148
|
|
-}
|
149
|
|
-
|
150
|
|
-function getPerson(){
|
151
|
|
-
|
152
|
|
- var getId = document.getElementById("getPersonId").value;
|
153
|
|
- var URI = "http://localhost:8080/people/" + getId;
|
154
|
|
- var requestType = "GET";
|
155
|
|
- var xhr = new XMLHttpRequest();
|
156
|
|
-
|
157
|
|
-xhr.withCredentials = true;
|
158
|
|
-
|
159
|
|
-xhr.addEventListener("readystatechange", function () {
|
160
|
|
- if (this.readyState === 4) {
|
161
|
|
- console.log(this)
|
162
|
|
- console.log(this.responseText);
|
163
|
|
- updateDisplay(this.responseText, requestType + URI + ":<br>");
|
164
|
|
- }
|
165
|
|
-});
|
166
|
|
-
|
167
|
|
-xhr.open(requestType, URI);
|
168
|
|
-xhr.setRequestHeader("content-type", "application/json");
|
169
|
|
-xhr.setRequestHeader("cache-control", "no-cache");
|
170
|
|
-// xhr.setRequestHeader("postman-token", "b11af5d0-9526-b27a-e6fc-a89dc4d348fc");
|
171
|
|
-
|
172
|
|
-xhr.send(null);
|
173
|
|
- // get values from fields
|
174
|
|
- // send POST request
|
175
|
|
- // update display with result
|
176
|
|
-}
|
177
|
|
-
|
178
|
|
-function getPeople(){
|
179
|
|
- // send GET /person request
|
180
|
|
- // update display with result
|
181
|
|
- var URI = "http://localhost:8080/people/";
|
182
|
|
- var requestType = "GET";
|
183
|
|
-
|
184
|
|
- var xhr = new XMLHttpRequest();
|
185
|
|
-xhr.withCredentials = true;
|
186
|
|
-
|
187
|
|
-xhr.addEventListener("readystatechange", function () {
|
188
|
|
- if (this.readyState === 4) {
|
189
|
|
- console.log(this)
|
190
|
|
- console.log(this.responseText);
|
191
|
|
- updateDisplay(this.responseText, requestType + URI + ":<br>");
|
192
|
|
- }
|
193
|
|
-});
|
194
|
|
-
|
195
|
|
-xhr.open(requestType, URI);
|
196
|
|
-xhr.setRequestHeader("content-type", "application/json");
|
197
|
|
-xhr.setRequestHeader("cache-control", "no-cache");
|
198
|
|
-// xhr.setRequestHeader("postman-token", "b11af5d0-9526-b27a-e6fc-a89dc4d348fc");
|
199
|
|
-
|
200
|
|
-xhr.send(null);
|
201
|
|
-}
|
202
|
|
-
|
203
|
|
-function deletePerson(){
|
204
|
|
-
|
205
|
|
- var deleteId = document.getElementById("deletePersonId").value;
|
206
|
|
- var URI = "http://localhost:8080/people/" + deleteId;
|
207
|
|
- var requestType = "DELETE";
|
208
|
|
- var xhr = new XMLHttpRequest();
|
209
|
|
-
|
210
|
|
- xhr.withCredentials = true;
|
211
|
|
-
|
212
|
|
- xhr.addEventListener("readystatechange", function () {
|
213
|
|
- if (this.readyState === 4) {
|
214
|
|
- console.log(this)
|
215
|
|
- console.log(this.responseText);
|
216
|
|
- updateDisplay(this.responseText, requestType + URI + ":<br>");
|
217
|
|
- }
|
218
|
|
- });
|
219
|
|
-
|
220
|
|
- xhr.open(requestType, URI);
|
221
|
|
- xhr.setRequestHeader("content-type", "application/json");
|
222
|
|
- xhr.setRequestHeader("cache-control", "no-cache");
|
223
|
|
- // xhr.setRequestHeader("postman-token", "b11af5d0-9526-b27a-e6fc-a89dc4d348fc");
|
224
|
|
-
|
225
|
|
- xhr.send(null);
|
226
|
|
- // get values from fields
|
227
|
|
- // send DELETE request
|
228
|
|
- // update display with result
|
229
|
|
-}
|
230
|
|
-</script>
|
231
|
|
-</body>
|
232
|
|
-</html>
|