form-submit vs location.href (http request 차이점)
밑에 질문에 대한 답변을 통해 location.href 도 server에 http request message를 보낸다는 것을 알게되었습니다.
그럼 이렇게 form 구문과 type=submit 으로 http request 메시지를 보내는 것과
<form action="item.html" th:action th:object="${item}" method="post">
.....
<button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>
.....
그냥 location.href를 통해 http request message를 보내는 것과 무슨 차이인가요??
<button class="w-100 btn btn-secondary btn-lg" th:onclick="|location.href='@{/form/items}'|" type="button">취소</button>만약 둘 다 server 한테 새 VIEW를 받아야하는 것이면 그냥 둘 중 하나로 통일해도 되는거 아닌가요?
복습 중인데 이쪽에서 이해가 계속 막히네요
답변 2
2
안녕하세요. mintuchel님
<form> 요소와 type="submit" 버튼을 사용하여 HTTP 요청을 보내는 것과 location.href를 사용하여 요청을 보내는 것 사이에는 중요한 차이점들이 있습니다. 이 두 방법은 서로 다른 상황과 목적에 맞게 설계되었습니다.
1. `<form>` 요소 사용:
- 목적: 데이터 전송 및 서버와의 상호작용에 주로 사용됩니다. 예를 들어, 사용자 입력을 수집하고 서버에 전송할 때 사용합니다.
- 메소드: GET 또는 POST와 같은 HTTP 메소드를 명시할 수 있어, 데이터 처리 방식을 제어할 수 있습니다.
- 데이터 전송: <form> 내부의 입력 필드(`input`, select, textarea 등)에서 수집한 데이터를 함께 전송할 수 있습니다.
2. `location.href` 사용:
- 목적: 주로 페이지 이동 또는 뷰(view)의 변화에 사용됩니다. 페이지의 URL을 변경하여 새로운 페이지로 이동하게 합니다.
- 메소드: 기본적으로 GET 메소드를 사용합니다. 따라서 데이터 전송에는 적합하지 않으며, 주로 뷰의 변경이나 단순 페이지 이동에 쓰입니다.
- 데이터 전송: URL을 통해서만 데이터를 전송할 수 있으며, 데이터 양이 제한적입니다.
두 방법의 선택은 주로 어떤 종류의 상호작용을 원하는지에 따라 결정됩니다. 데이터를 보호해야 하거나 사용자로부터 복잡한 입력을 받아야 하는 경우 <form> 요소를 사용하는 것이 좋습니다. 반면, 단순히 다른 페이지로 이동하거나 뷰를 변경하는 경우에는 location.href가 더 적합할 수 있습니다.
쉽게 정리하자면 단순한 화면 이동의 경우 location.href를 사용하면 되고, 데이터를 함께 전송하는 경우 form 요소를 함께 사용하는 것이 좋습니다.
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
해당 질문과 유사한 내용을 다룬 기존 답변들은 다음과 같습니다.
1. form태그 url과 button태그 url
mintuchel 님께서 궁금해하신 내용은 form 태그의 submit 액션과 location.href을 이용한 이동 방식의 차이에 관한 것입니다. 답변에서는 form 내부의 submit 버튼이 해당 폼을 서버에 전송하는 기능을 수행하고, type="button"과 onclick 속성을 사용하여 location.href로 명시된 주소로 이동하는 로직을 설명하고 있습니다. 해당 로직은 th:onclick을 사용해 서버로 HTTP GET 요청을 보내는 방식입니다.
2. type= “button”, type=“submit”의 차이
이 답변에서는 버튼의 type 속성이 submit인 경우와 button인 경우에 대한 작동 방식 차이를 설명하고 있습니다. type="submit"은 기본적으로 포함된 폼의 데이터를 서버에 제출합니다. 반면, type="button"은 기본적으로 폼 제출 기능이 없으며, JS 코드나 다른 이벤트 핸들러를 사용하여 다른 동작을 수행하게 합니다. 이 설명은 mintuchel 님의 질문에 대한 차이점을 이해하는 데 도움을 줄 수 있습니다.
3. 상품등록 버튼과 취소버튼의 차이
이 내용 또한 버튼 타입에 따른 동작의 차이점을 다루고 있으며, type="submit"과 type="button"이 폼 내에서 어떻게 다르게 동작하는지에 대해 설명하고 있습니다. 이는 mintuchel 님의 이해를 돕기에 적합한 내용일 수 있습니다.
제공된 답변들은 form을 제출할 때와, JavaScript를 사용하여 페이지 이동을 하는 경우가 서로 다른 시나리오에서 어떻게 사용되는지 설명해주는 내용들입니다. 특히, form의 submit 행위는 서버에 데이터를 전달하는 행위이며, location.href는 단순 페이지 이동에 해당하는 것으로, 데이터 전달과는 별계의 동작입니다.
수강생 분께서 참고해보시면 좋을 것 같습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
그럼 form-submit 를 사용하면 서버에 데이터를 전달한다는게, http request message의 body에 데이터를 저장해서 서버한테 보낸다는 것이고,
그냥 location.href 사용하면 단순 페이지 이동이라고 하는 것은, http request message로 서버에 데이터를 전송하지는 않고 즉 body 부분이 없고, 그냥 start-line으로 해당 URL에 대한 VIEW만 요청하는 것이라고 이해하면 된걸까요?
이미지 업로드와 db 트랜잭션 묶는법
0
44
1
Could not resolve org.springframework.boot:spring-boot-starter-validation:2.4.4
0
54
2
MessageSourceTest 코드
0
49
1
인터셉터 에러 설정
0
48
1
resolveArgument()메서드 질문
0
58
1
43강 검증1 에서 실패 로직 관련 질문있습니다.
0
60
2
타임리프 3.X 버전 rendering, serializer 에러 해결 방법
2
133
3
스프링 빈에 등록이 안되는거 같은데 어떻게 하면 좋을까요?ㅠㅠ
0
93
3
pdf 오타 문의
0
57
1
ItemUpdateForm 검증 관련 질문입니다.
0
49
1
22page 링크 주소 변경
0
59
2
특정 데이터와 파일을 함께 저장 시, 테이블 구조 질문
0
53
1
섹션3번 수업에 대한 질문입니다.
0
80
2
@Autowired 보다 더 좋은 방법이 어떤 걸까요?
0
86
2
타입컨버터 가 람다랑 비슷해 보이는데 저의 생각이 맞는지?.
0
66
1
자바스크립트 인라인에서 객체 직렬화 시 오류가 납니다
0
143
3
스프링부트 - 오류페이지2 에서 500.html 에서 쓰인 객체 질문
0
64
1
톰캣 에러 페이지가 안보입니다.
0
104
2
apiEceptionController에서 센드 에러 호출하면 안되는지?
0
81
1
세션 타임아웃시 쿠키 삭제 방법이 없나요?
0
118
2
ApiExceptionController 질문드립니다.
0
64
1
셀렉박스 챕터에서 option value에 ==배송 방식 선택== 이것을 넣은 이유가 궁금함, 이렇게 구상해도 되는지?
0
66
1
MemberRepository 필드의 fianl 선언 유무
0
85
2
혹시 index.html 에서는 fragment 사용이 안되는건가요
0
59
1