힘내보자

jQuery 통하여 Ajax 구현

jQuey의 Ajax 속성

url : request해서 데이터 전송할 url

data : 서버로 전송할 데이터의 parameter 설정값

datatype : 서버의 response 데이터의 형식(xml, text, json, html 등) 지정 값

 - 디폴트시 auto

success(data) : 통신 성공 시, 호술되는 함수 지정값. 파라미터로 response 데이터(data)를 받음

error : 통신 실패 시, 호출되는 함수 지정값. 역시 파라미터로 response  데이터(data)를 받음

complete : 통신 성패 여부 관계 없이 통신 실행완료 후 실행되는 함수 지정값

async : 비동기(true)/동기(false) 지정

3.서버 기본 전송 값에서 결과로 str 받아처리하기

<script>
		// 더하기 버튼을 누르면 첫번째 숫자의 값과 두번째 숫자의 값을 ajax를 통해 jQuery3.do쪽으로 전송하는 코드 작성
		$('#plusBtn').click(function(){
			var n1 = $('#firstNum').val();
			var n2 = $('#secondNum').val();
			
			$.ajax({
				url: 'jQueryAjax3',
				data: {n1:n1, n2:n2},
				type: 'post',
				datatype: 'text',
				success: function(data){
					console.log('전송 성공');
					console.log("받아온 data값 = " +data);
				},
				error: function(data){
					console.log('전송 실패');
				},
				async: true
			});
		});
	</script>

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		int n1 = Integer.parseInt(request.getParameter("n1"));
		int n2 = Integer.parseInt(request.getParameter("n2"));
	
		int sum = n1 + n2;
		
		response.getWriter().print(sum);
		
	}

4. 객체형태 데이터를 서버에 전송하고 서버에서 처리하기

<h3>4. Object형태의 데이터를 서버에 전송, 서버에서 데이터 처리 후 서버 console로 출력</h3>
	<!-- 여기서 말하는 콘솔은 이클립스 콘솔을 의미함 -->
	학생1 : <input type="text" id="student1"><br>
	학생2 : <input type="text" id="student2"><br>
	학생3 : <input type="text" id="student3"><br>
	<button id="studentTest">결과확인</button>
	<script>
		// 결과확인 버든을 누르면 학생1, 학생2, 학생3의 이름이 jQuery4.do 쪽으로 전송
		// 전송된 학생들의 이름은 서버의 console창에 아래 예시와 같이 출력되고
		// 화면에서는 "전송 성공"이라는 알람창이 뜸
		// console 출력 예시 : 수업을 들을 하생은 ooo,xxx,ㅁㅁㅁ입니다
		$('#studentTest').on('click',function(){
			var student1 = $('#student1').val();
			var student2 = $('#student2').val();
			var student3 = $('#student3').val();
			
			$.ajax({
				url:'jQueryAjax4',
				data: {student1:student1, student2:student2, student3:student3},
				type: 'post',
				/* datatype: 'text', */
				success:function(data){
					alert('전송 성공');	
				},
				error: function(data){
					alert('fail');
				},
				complete: function(){
					alert('another func');
				},
			});
		
		});
	</script>​

		request.setCharacterEncoding("UTF-8");
		
		String s1 = request.getParameter("student1");
		String s2 = request.getParameter("student2");
		String s3 = request.getParameter("student3");
		
		System.out.printf("이름 출력 %s, %s, %s",s1,s2,s3);