Commit @b9804dd380d06985cef33835f2387a18c7d20a97

mycom 2022-09-02

220902 index.html 교체

@b9804dd380d06985cef33835f2387a18c7d20a97

5fa795e

b9804dd

src/front-end/views/index.html

--- src/front-end/views/index.html

+++ src/front-end/views/index.html


 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Index</title>
+    <title>spring-legacy-project</title>
 </head>
 <body>
-    index
-
-    <p>jsonTestForRequestParam</p>
-    <form method="post" action="/jsonTestForRequestParam">
-        <input type="text" name="name">
-        <input type="text" name="age">
-        <button type="submit">submit</button>
-    </form>
-
-    <p>jsonTestForRequestBody 안됨</p>
-    <form method="post" action="/jsonTestForRequestBody">
-        <input type="text" name="name">
-        <input type="text" name="age">
-        <button type="submit">submit</button>
-    </form>
-
-    <p>jsonTestForMultipart 잘됨</p>
-    <form method="post" action="/jsonTestForMultipart" enctype="multipart/form-data">
-        <input type="text" name="name">
-        <input type="text" name="age">
-        <input type="file" name="file" id="file">
-        <button type="submit">submit</button>
-        <button type="button" onclick="postAjaxMultipartReqeust()">postAjaxMultipartReqeust</button>
-    </form>
+    Hello World
 
     <script>
-        function testDataSelectList () {
-            fetch('/testDataSelectList', {
-                method: "GET",
-                headers: {
-                    'Content-Type': 'application/json; charset=UTF-8'
-                }
-            }).then(function (response) {
-                console.log("testDataSelectList - response:", response);
-                response.json().then(function (data) {
-                    console.log("testDataSelectList - data:", data);
-                })
-            }).catch(function (error) {
-                console.log("testDataSelectList - error", error)
-            });
-        }
-        testDataSelectList();
-
-
-
-        function getAjaxReqeust () {
-            fetch('/jsonTestForRequestParam?method=GET&title=testTitle&age=30', {
-                method: "GET",
-                headers: {
-                    //'Content-Type': 'multipart/form-data; charset=UTF-8'
-                    //'Content-Type': 'application/json; charset=UTF-8'
-                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-                }
-            })
-            .then((response) => response.json())
-            .then((data) => console.log("jsonTestForRequestParam - data:", data))
-            .catch((error) => console.log("jsonTestForRequestParam - error:", error));
-        }
-
-
-
-        function postAjaxReqeust () {
-
-            //이건 안됨
-            /*fetch('/jsonTestForRequestParam', {
-                method: "POST",
-                headers: {
-                    //'Content-Type': 'multipart/form-data; charset=UTF-8'
-                    //'Content-Type': 'application/json; charset=UTF-8'
-                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-                },
-                body: JSON.stringify({
-                    method: "POST",
-                    title: "testTitlePost",
-                    age: 213,
-                })
-            })
-            .then((response) => response.json())
-            .then((data) => console.log("jsonTestForRequestParam - data:", data))
-            .catch((error) => console.log("jsonTestForRequestParam - error:", error));*/
-
-            //이건 잘됨
-            fetch('/jsonTestForRequestBody', {
-                method: "POST",
-                headers: {
-                    //'Content-Type': 'multipart/form-data; charset=UTF-8'
-                    'Content-Type': 'application/json; charset=UTF-8'
-                    //'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-                },
-                body: JSON.stringify({
-                    method: "POST",
-                    title: "testTitlePost",
-                    age: 213,
-                })
-            })
-            .then((response) => response.json())
-            .then((data) => console.log("jsonTestForRequestParam - data:", data))
-            .catch((error) => console.log("jsonTestForRequestParam - error:", error));
-        }
-
-        function postAjaxMultipartReqeust () {
-            //이거 잘됨
-            let formData = new FormData();
-            formData.append('method', "POST");
-            formData.append('title', "testTitlePost");
-            formData.append('age', 22);
-            let fileInput = document.getElementById('file');
-            for (let i = 0; i < fileInput.files.length; i++) {
-                formData.append('files', fileInput.files[i]);
-            }
-            //이거 잘됨 (단, progress를 활용 못함)
-            /*fetch('/jsonTestForMultipart', {
-                method: "POST",
-                headers: {
-                    //'Content-Type': 'multipart/form-data' 이거 안됨. 왜 안되냐 하면, fetch api로 formData를 보낼때 헤더를 설정 하지 말아야 하고, 그 이유는 헤더에 자동으로 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryMJtHYBc9ERyjdAy8 세팅된다고 함
-                    //'Content-Type': 'application/json; charset=UTF-8' 이거 안됨(당연)
-                    //'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 이거 안됨(당연)
-                },
-                body: formData
-            })
-            .then((response) => response.json())
-            .then((data) => console.log("jsonTestForMultipart - data:", data))
-            .catch((error) => console.log("jsonTestForMultipart - error:", error));*/
-
-            //이거 잘됨 (progress 활용 가능)
-            let request = new XMLHttpRequest();
-            request.open('POST', '/jsonTestForMultipart');
-            // upload progress event
-            request.upload.addEventListener('progress', function(e) {
-                // upload progress as percentage
-                let percent_completed = (e.loaded / e.total)*100;
-                console.log(percent_completed);
-            });
-            // request finished event
-            request.addEventListener('load', function(e) {
-                // HTTP status message (200, 404 etc)
-                console.log('request.status : ', request.status);
-
-                // request.response holds response from the server
-                console.log('request.response : ', request.response);
-            });
-            // send POST request to server
-            request.send(formData);
-        }
-
-        //getAjaxReqeust();
-        //postAjaxReqeust();
+        console.log('Hello World');
     </script>
 </body>
 </html>

b9804dd

src/front-end/views/index.html_필요없으면삭제 (added)

+++ src/front-end/views/index.html_필요없으면삭제

...	...	@@ -0,0 +1,157 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8">
	5	+ <title>Index</title>
	6	+</head>
	7	+<body>
	8	+ index
	9	+
	10	+ <p>jsonTestForRequestParam</p>
	11	+ <form method="post" action="/jsonTestForRequestParam">
	12	+ <input type="text" name="name">
	13	+ <input type="text" name="age">
	14	+ <button type="submit">submit</button>
	15	+ </form>
	16	+
	17	+ <p>jsonTestForRequestBody 안됨</p>
	18	+ <form method="post" action="/jsonTestForRequestBody">
	19	+ <input type="text" name="name">
	20	+ <input type="text" name="age">
	21	+ <button type="submit">submit</button>
	22	+ </form>
	23	+
	24	+ <p>jsonTestForMultipart 잘됨</p>
	25	+ <form method="post" action="/jsonTestForMultipart" enctype="multipart/form-data">
	26	+ <input type="text" name="name">
	27	+ <input type="text" name="age">
	28	+ <input type="file" name="file" id="file">
	29	+ <button type="submit">submit</button>
	30	+ <button type="button" onclick="postAjaxMultipartReqeust()">postAjaxMultipartReqeust</button>
	31	+ </form>
	32	+
	33	+ <script>
	34	+ function testDataSelectList () {
	35	+ fetch('/testDataSelectList', {
	36	+ method: "GET",
	37	+ headers: {
	38	+ 'Content-Type': 'application/json; charset=UTF-8'
	39	+ }
	40	+ }).then(function (response) {
	41	+ console.log("testDataSelectList - response:", response);
	42	+ response.json().then(function (data) {
	43	+ console.log("testDataSelectList - data:", data);
	44	+ })
	45	+ }).catch(function (error) {
	46	+ console.log("testDataSelectList - error", error)
	47	+ });
	48	+ }
	49	+ testDataSelectList();
	50	+
	51	+
	52	+
	53	+ function getAjaxReqeust () {
	54	+ fetch('/jsonTestForRequestParam?method=GET&title=testTitle&age=30', {
	55	+ method: "GET",
	56	+ headers: {
	57	+ //'Content-Type': 'multipart/form-data; charset=UTF-8'
	58	+ //'Content-Type': 'application/json; charset=UTF-8'
	59	+ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
	60	+ }
	61	+ })
	62	+ .then((response) => response.json())
	63	+ .then((data) => console.log("jsonTestForRequestParam - data:", data))
	64	+ .catch((error) => console.log("jsonTestForRequestParam - error:", error));
	65	+ }
	66	+
	67	+
	68	+
	69	+ function postAjaxReqeust () {
	70	+
	71	+ //이건 안됨
	72	+ /*fetch('/jsonTestForRequestParam', {
	73	+ method: "POST",
	74	+ headers: {
	75	+ //'Content-Type': 'multipart/form-data; charset=UTF-8'
	76	+ //'Content-Type': 'application/json; charset=UTF-8'
	77	+ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
	78	+ },
	79	+ body: JSON.stringify({
	80	+ method: "POST",
	81	+ title: "testTitlePost",
	82	+ age: 213,
	83	+ })
	84	+ })
	85	+ .then((response) => response.json())
	86	+ .then((data) => console.log("jsonTestForRequestParam - data:", data))
	87	+ .catch((error) => console.log("jsonTestForRequestParam - error:", error));*/
	88	+
	89	+ //이건 잘됨
	90	+ fetch('/jsonTestForRequestBody', {
	91	+ method: "POST",
	92	+ headers: {
	93	+ //'Content-Type': 'multipart/form-data; charset=UTF-8'
	94	+ 'Content-Type': 'application/json; charset=UTF-8'
	95	+ //'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
	96	+ },
	97	+ body: JSON.stringify({
	98	+ method: "POST",
	99	+ title: "testTitlePost",
	100	+ age: 213,
	101	+ })
	102	+ })
	103	+ .then((response) => response.json())
	104	+ .then((data) => console.log("jsonTestForRequestParam - data:", data))
	105	+ .catch((error) => console.log("jsonTestForRequestParam - error:", error));
	106	+ }
	107	+
	108	+ function postAjaxMultipartReqeust () {
	109	+ //이거 잘됨
	110	+ let formData = new FormData();
	111	+ formData.append('method', "POST");
	112	+ formData.append('title', "testTitlePost");
	113	+ formData.append('age', 22);
	114	+ let fileInput = document.getElementById('file');
	115	+ for (let i = 0; i < fileInput.files.length; i++) {
	116	+ formData.append('files', fileInput.files[i]);
	117	+ }
	118	+ //이거 잘됨 (단, progress를 활용 못함)
	119	+ /*fetch('/jsonTestForMultipart', {
	120	+ method: "POST",
	121	+ headers: {
	122	+ //'Content-Type': 'multipart/form-data' 이거 안됨. 왜 안되냐 하면, fetch api로 formData를 보낼때 헤더를 설정 하지 말아야 하고, 그 이유는 헤더에 자동으로 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryMJtHYBc9ERyjdAy8 세팅된다고 함
	123	+ //'Content-Type': 'application/json; charset=UTF-8' 이거 안됨(당연)
	124	+ //'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 이거 안됨(당연)
	125	+ },
	126	+ body: formData
	127	+ })
	128	+ .then((response) => response.json())
	129	+ .then((data) => console.log("jsonTestForMultipart - data:", data))
	130	+ .catch((error) => console.log("jsonTestForMultipart - error:", error));*/
	131	+
	132	+ //이거 잘됨 (progress 활용 가능)
	133	+ let request = new XMLHttpRequest();
	134	+ request.open('POST', '/jsonTestForMultipart');
	135	+ // upload progress event
	136	+ request.upload.addEventListener('progress', function(e) {
	137	+ // upload progress as percentage
	138	+ let percent_completed = (e.loaded / e.total)*100;
	139	+ console.log(percent_completed);
	140	+ });
	141	+ // request finished event
	142	+ request.addEventListener('load', function(e) {
	143	+ // HTTP status message (200, 404 etc)
	144	+ console.log('request.status : ', request.status);
	145	+
	146	+ // request.response holds response from the server
	147	+ console.log('request.response : ', request.response);
	148	+ });
	149	+ // send POST request to server
	150	+ request.send(formData);
	151	+ }
	152	+
	153	+ //getAjaxReqeust();
	154	+ //postAjaxReqeust();
	155	+ </script>
	156	+</body>
	157	+</html>(파일 끝에 줄바꿈 문자 없음)

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,156 +2,13 @@
2	2	<html lang="en">
3	3	<head>
4	4	<meta charset="UTF-8">
5		- <title>Index</title>
	5	+ <title>spring-legacy-project</title>
6	6	</head>
7	7	<body>
8		- index
9		-
10		- <p>jsonTestForRequestParam</p>
11		- <form method="post" action="/jsonTestForRequestParam">
12		- <input type="text" name="name">
13		- <input type="text" name="age">
14		- <button type="submit">submit</button>
15		- </form>
16		-
17		- <p>jsonTestForRequestBody 안됨</p>
18		- <form method="post" action="/jsonTestForRequestBody">
19		- <input type="text" name="name">
20		- <input type="text" name="age">
21		- <button type="submit">submit</button>
22		- </form>
23		-
24		- <p>jsonTestForMultipart 잘됨</p>
25		- <form method="post" action="/jsonTestForMultipart" enctype="multipart/form-data">
26		- <input type="text" name="name">
27		- <input type="text" name="age">
28		- <input type="file" name="file" id="file">
29		- <button type="submit">submit</button>
30		- <button type="button" onclick="postAjaxMultipartReqeust()">postAjaxMultipartReqeust</button>
31		- </form>
	8	+ Hello World
32	9
33	10	<script>
34		- function testDataSelectList () {
35		- fetch('/testDataSelectList', {
36		- method: "GET",
37		- headers: {
38		- 'Content-Type': 'application/json; charset=UTF-8'
39		- }
40		- }).then(function (response) {
41		- console.log("testDataSelectList - response:", response);
42		- response.json().then(function (data) {
43		- console.log("testDataSelectList - data:", data);
44		- })
45		- }).catch(function (error) {
46		- console.log("testDataSelectList - error", error)
47		- });
48		- }
49		- testDataSelectList();
50		-
51		-
52		-
53		- function getAjaxReqeust () {
54		- fetch('/jsonTestForRequestParam?method=GET&title=testTitle&age=30', {
55		- method: "GET",
56		- headers: {
57		- //'Content-Type': 'multipart/form-data; charset=UTF-8'
58		- //'Content-Type': 'application/json; charset=UTF-8'
59		- 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
60		- }
61		- })
62		- .then((response) => response.json())
63		- .then((data) => console.log("jsonTestForRequestParam - data:", data))
64		- .catch((error) => console.log("jsonTestForRequestParam - error:", error));
65		- }
66		-
67		-
68		-
69		- function postAjaxReqeust () {
70		-
71		- //이건 안됨
72		- /*fetch('/jsonTestForRequestParam', {
73		- method: "POST",
74		- headers: {
75		- //'Content-Type': 'multipart/form-data; charset=UTF-8'
76		- //'Content-Type': 'application/json; charset=UTF-8'
77		- 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
78		- },
79		- body: JSON.stringify({
80		- method: "POST",
81		- title: "testTitlePost",
82		- age: 213,
83		- })
84		- })
85		- .then((response) => response.json())
86		- .then((data) => console.log("jsonTestForRequestParam - data:", data))
87		- .catch((error) => console.log("jsonTestForRequestParam - error:", error));*/
88		-
89		- //이건 잘됨
90		- fetch('/jsonTestForRequestBody', {
91		- method: "POST",
92		- headers: {
93		- //'Content-Type': 'multipart/form-data; charset=UTF-8'
94		- 'Content-Type': 'application/json; charset=UTF-8'
95		- //'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
96		- },
97		- body: JSON.stringify({
98		- method: "POST",
99		- title: "testTitlePost",
100		- age: 213,
101		- })
102		- })
103		- .then((response) => response.json())
104		- .then((data) => console.log("jsonTestForRequestParam - data:", data))
105		- .catch((error) => console.log("jsonTestForRequestParam - error:", error));
106		- }
107		-
108		- function postAjaxMultipartReqeust () {
109		- //이거 잘됨
110		- let formData = new FormData();
111		- formData.append('method', "POST");
112		- formData.append('title', "testTitlePost");
113		- formData.append('age', 22);
114		- let fileInput = document.getElementById('file');
115		- for (let i = 0; i < fileInput.files.length; i++) {
116		- formData.append('files', fileInput.files[i]);
117		- }
118		- //이거 잘됨 (단, progress를 활용 못함)
119		- /*fetch('/jsonTestForMultipart', {
120		- method: "POST",
121		- headers: {
122		- //'Content-Type': 'multipart/form-data' 이거 안됨. 왜 안되냐 하면, fetch api로 formData를 보낼때 헤더를 설정 하지 말아야 하고, 그 이유는 헤더에 자동으로 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryMJtHYBc9ERyjdAy8 세팅된다고 함
123		- //'Content-Type': 'application/json; charset=UTF-8' 이거 안됨(당연)
124		- //'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 이거 안됨(당연)
125		- },
126		- body: formData
127		- })
128		- .then((response) => response.json())
129		- .then((data) => console.log("jsonTestForMultipart - data:", data))
130		- .catch((error) => console.log("jsonTestForMultipart - error:", error));*/
131		-
132		- //이거 잘됨 (progress 활용 가능)
133		- let request = new XMLHttpRequest();
134		- request.open('POST', '/jsonTestForMultipart');
135		- // upload progress event
136		- request.upload.addEventListener('progress', function(e) {
137		- // upload progress as percentage
138		- let percent_completed = (e.loaded / e.total)*100;
139		- console.log(percent_completed);
140		- });
141		- // request finished event
142		- request.addEventListener('load', function(e) {
143		- // HTTP status message (200, 404 etc)
144		- console.log('request.status : ', request.status);
145		-
146		- // request.response holds response from the server
147		- console.log('request.response : ', request.response);
148		- });
149		- // send POST request to server
150		- request.send(formData);
151		- }
152		-
153		- //getAjaxReqeust();
154		- //postAjaxReqeust();
	11	+ console.log('Hello World');
155	12	</script>
156	13	</body>
157	14	</html> (파일 끝에 줄바꿈 문자 없음)

Delete comment