ajax의 기본 속성 값
async(Asynchronous)
- 비동기를 설정하는 속성으로 true면 비동기, false면 동기 방식으로 동작
- 비동기방식으로 동작을 시키면 ajax가 처리되는 것과 별개로 ajax 이후 코드들이 실행
- 동기 방식으로 동작을 시키면 ajax 처리가 다 끝나고 ajax 이후 코드들이 실행
type
- 요청하는 방식을 설정하는 속성으로 post와 get 방식이 있음
- get
- get 방식은 데이터를 URI(Uniform Resource Identifier)에 실어 보내는 방식으로 데이터가 적거나 보안이 필요하지 않은 경우
- 화면을 보여주기 위해서는 get방식이 필수
- 대표적으로 게시글을 보여줄때 사용
- post
- post 방식은 데이터를 BODY에 포함하여 전달하는 방식
- 디비에 정보를 처리하기 위한 방식으로 사용
- 대표적으로 회원가입, 로그인, 게시판 등록 등이 있음
url
- 업무를 요청하기 위한 URL(Uniform Resource Locator)를 설정
dataType
- 서버에서 보내줄 데이터 타입을 설정
contentType
- 서버로 보낼 데이터 타입을 설정
- 서버로 Object로 데이터를 보내기위해서는 contentType 생략
예시
- jsp에서 ajax를 이용하여 넘겨준 데이터를 컨트롤러에서 객체로 받는 예제
- 컨트롤러
1 2 3 4 5 6 7 | @RequestMapping(value ="/checkemail",method = RequestMethod.POST) public Map<Object, Object> emailcheck(User user){ Map<Object, Object> map = new HashMap<Object, Object>(); map.put("id",user.getId()); map.put("email", user.getEmail()); return map; } | cs |
- User 클래스
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | class User{ String id; String email; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } } | cs |
- jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#ajaxTest').click(function(){ var m = {'id':'test123', 'email': 'test@gmail.com'} $.ajax({ async:true, type:'POST', data:m, url:"<%=request.getContextPath()%>/checkemail", dataType:"json", success : function(data){ console.log(data.id,' : ' , data.email); } }); }); }) </script> </head> <body> <button type="button" id="ajaxTest">ajax 테스트</button> </body> </html> | cs |