728x90

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) 지정

 

 

1.버튼 누르면 전송값을 서버에 출력하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>

<title>Insert title here</title>

<style>.test{width:300px; min-height:50px; border:1px solid red;}</style>

</head>
<body>
	
	<h1>jQuery-Ajax구현</h1>
	
	<h3>1.client가 server에 requset</h3>
	이름 : <input type="text" id="myName">
	<button id="nameBtn">전송</button>
	<script>
		$('#nameBtn').on('click',function(){
			var userName = $('#myName').val();
	        
			$.ajax({
	        	url: 'jQueryAjaxServlet1',
	        	type: 'get',
	            data: {userName:userName},
	            success: function(){
	            	alert('전송 성공');
	            },
	            error: function(){
	            	alert('전송 실패');
	            },
	            complete: function(){
	            	alert('성공실패 상관없이 무조건 실행되는 complete');
	            }
			});
		});

	</script>
	
	
</body>
</html>
@WebServlet("/jQueryAjaxServlet1")
public class JQueryAjax1 extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public JQueryAjax1() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		System.out.println("서블릿도착");
		
		String name = request.getParameter("userName");
		System.out.println(name);	
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

 

 

2.버튼 누르면 서버에서 보낸 값을 사용자가 수신하기

 

<h3>2.버튼 선택 시, 서버에서 보낸 값 사용자가 수신</h3>		<!-- 서버가 클라이언트에 response -->
	<button id="getServerTextBtn">서버에서 보낸 값 확인</button>
	<p class="test" id="p1"></p>
	<script>
$('#getServerTextBtn').click(function(){
			$.ajax({
				url:'jQueryAjax2',
				// data : 서버에서 사용자에게 보낼 데이터가 없으므로 기술x
				type : 'get',
				success: function(data){
					alert('성공');
					console.log(typeof data);
					$('#p1').text(data);
				},
				error: function(){
					alert("에러 발생");	
				},
				complete: function(){
					alert('comeplete work');
				}
			});
		});
	</script>

 

response.getWriter().print("서버에서 전송한 데이터 입니다");

 

728x90
반응형

+ Recent posts