[Ajax] 08. Ajax POST방식과 Json POST방식

1. Ajax - POST2 방식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - POST방식</title>
</head>
<body>
	<button type="button" onclick="reqList();">등록</button>
	<button type="button" onclick="delList();">삭제</button>
	<p id="resp"></p>
	<Script>
		function reqList() {
			var param = {};
			param.name = "홍길동";
			param.tel = "010-1234-5678";
			param.address = "율도국";
			
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				url : "/contact/add.do",
				//메소드 타입 지정
				type : "POST",
				//요청 시 서버로 전달할 데이터 지정
				data : param,
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});
		}

		function delList() {
			//p요소 초기화
			$("#resp").html("");
		}
	</Script>
</body>
</html>

2. Ajax - POST_Json

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - POST방식</title>
</head>
<body>
	<button type="button" onclick="reqList();">등록</button>
	<button type="button" onclick="delList();">삭제</button>
	<p id="resp"></p>
	<Script>
		function reqList() {
			var send_data = {
				contacts : [
					{ no : 64, name : "오바마", tel : "010-1111-2222", address : "워싱턴"},
					{ no : 63, name : "힐러리", tel : "010-1111-2222", address : "워싱턴"},
					{ no : 62, name : "샌더스", tel : "010-1111-2222", address : "워싱턴"},
					{ no : 61, name : "트럼프", tel : "010-1111-2222", address : "워싱턴"},
					{ no : 60, name : "바이든", tel : "010-1111-2222", address : "워싱턴"}
				]
			};
			
			
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				url : "/contact/update_batch.do",
				//메소드 타입 지정
				type : "POST",
				//서버로 전달할 데이터 형식 지정
				contentType : "application/json",
				//요청 시 서버로 전달할 데이터 지정
				//JSON.stringify() : json객체를 문자열로 변환
				data : JSON.stringify(send_data),
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});
		}

		function delList() {
			//p요소 초기화
			$("#resp").html("");
		}
	</Script>
</body>
</html>

저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글

[Ajax] 10. Ajax 콜백 함수 (0)	2021.10.06
[Ajax] 09. Ajax Bootstrap table로 나타내기 (0)	2021.10.06
[Ajax] 07. Ajax 동기 방식(Sync)과 비동기 방식(Async) (0)	2021.10.06
[Ajax] 06. GET 방식과 POST방식 (0)	2021.10.06
[Ajax] 05. Ajax 기본형과 설정 값들 (0)	2021.10.06