chu1ta26
/
CR-MesoLab-Spring-PersonController.CRUD
forked from Cohort4.2/CR-MesoLab-Spring-PersonController.CRUD
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Add Requests.html for demoing HTTP verbs

David Ginzberg 7 years ago
parent
b307a434b6
commit
51cbf9ddb3
1 changed files with 232 additions and 0 deletions
Split View Show Diff Stats
  1. 232
    0
      src/main/resources/static/Requests.html

+ 232
- 0
src/main/resources/static/Requests.html View File 

@@ -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>