[JavaScript] ajax와 form 전송의 차이

	Ajax 전송	Form 전송
전송 방식	비동기/동기	동기
방식	method 방식	type success funtion 방식
페이지 이동(Reload)	X	O
Event(이벤트) 발생	Evnet Listener 생성을 통해 데이터 전송	별도의 코드 없이 HTML만으로 submit 이벤트를 통해  데이터 전송
content-type (request로 보내는 데이터가 무엇인지 확인)	(기본) - application/x-www-form-urlencoded  - key=value&key=value 형태로 전송 ex)  data:id=${id}&email=${email}&email_auth_key=${email_auth_key}	(기본) - application/x-www-form-urlencoded  (파일전송) - multipart/form-data
설명	- 전체페이지를 다시 읽어오지 않고 변경된 부분을 읽어오기 때문에 시간 단축 가능 - 대기시간이 줄어들어 웹페이지를 더욱 효과적으로 사용 가능	- 전체 페이지를 리로드 하기 되기 때문에 시간이 오래 걸림 - action을 취하고 난 후, 페이지가 변경이 되는 경우에 자주 사용

 

Ajax 전송	Form 전송
$.ajax({ type : "post", dataType : "json", url : "/test.do", data : param, success : function(data) { var result = data; return result; } });	<form method="post" action="test.do"> <input type="text" value="폼 전송"> <input type="submit" value="전송"> </form>

 

---

 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hatsukoi1307&logNo=220683653556

[Ajax] 기초 - submit 처리와 ajax 처리의 비교

 

https://devgwangpal.tistory.com/80

[ajax] ajax를 활용한 form data 전송

 

https://jae-kwang.github.io/blog/2017/10/16/form-vs-ajax/

form 전송과 ajax 전송

 

https://milkye.tistory.com/266

Submit과 Ajax의 차이를 알려드립니다!