73일차 2023-06-21

Ajax (springBoot)

73일차 2023-06-21

choi Hoon 2023. 6. 21. 18:31

Ajax

[$.ajax()메서드]

	-가장 사용빈도가 높은 메서드로  jQuery Ajax 관련 메서드를  모두 이 메서드로 구현가능하다
	 즉 HTML,JSON,XML데이타를 로드하거나 POST 및 GET방식으로 데이타를
	 전송하거나 등등 이 이 메서드 하나로 가능하다

	-매개변수중 url,type,data,dataType은 기본적으로 항상 사용하기 때문에
	 $.ajaxSetup()메서드에 설정하면 생략가능하다

	


	$.ajax({인자1:값1,인자2:값2,.....})메서드의 인자들

	url:서버측 페이지 url	
	type:HTTP메서드, 기본값은GET, POST와GET 중선택
	data:서버로 전송되는 데이터[JSON타입의 형식 ]
	dataType:응답결과의 데이터형식(xml,html,json,script, text)
	timeout:요청에대한 응답 제한시간(millisecond)
	contentType:서버전송시의 content-type, application/x-wwwform-urlencoded기본
	success:응답이 성공하는경우 호출되는 콜백함수(무명함수 또는 함수포인터)
	error:에러 발생시 실행되는 콜백함수
	complete:요청이 완료 되었을때 호출되는 콜백함수
	asyn:false로 지정하면 동기 호출 전송. True(디폴트) 설정시 비동기호출


	예]
	   --JsData.js
	   function MyAlert(str1,str2) {
		alert(str1+str2);
	   }
	   -----------------------------------------------------------

	    <script type="text/javascript">

		//에러시 실행할 함수
		function err() { alert('실패'); }

		$(document).ready(
		    function () {
	
			$.ajax({
			    url: 'JsData.js',
			    dataType: "script",
			    type: "get",
			    success: function (data) { MyAlert('Hello ','World'); },
			    error: err


			});


			$('#btn').click(function () {
			    $.ajax({
				url: "printToday.jsp",
				dataType: "html",
				type: "get",
				contentType:'text/html;charset:utf-8',
				data: { msg: $(this).text() }, //서버에 데이타 전송
				success:suc
				//무명함수로 처리
				/*
				function (data) { //data라는 인자에 서버에서 보낸 결과값이 저장 됨

				    $('#pnlDisplay').html(data);

				}
				*/



			    });


			});

		    }


		);

		function suc(data){

			$('#pnlDisplay').html(data);
		}
	    
	    </script>
	</head>
	<body>

	    <button id="btn">$.ajax()메서드 이용</button>
	    <div id="pnlDisplay"></div>
	</body>

Index.jsp