瀏覽代碼

Add Requests.html for demoing HTTP verbs

David Ginzberg 7 年之前
父節點
當前提交
51cbf9ddb3
共有 1 個文件被更改,包括 232 次插入0 次删除
  1. 232
    0
      src/main/resources/static/Requests.html

+ 232
- 0
src/main/resources/static/Requests.html 查看文件

@@ -0,0 +1,232 @@
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>