Ajax

 

Ajax란 JavaScript의 라이브러리 중 하나이며 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 비동기 방식으로 데이터를 로드하는 기법이다

 

장점 : 웹페이지의 처리 속도가 향상된다.

        다른 작업을 동시에 할 수 있다.

        페이지를 새로고침 하지 않고 처리한다.

단점 : 히스토리 관리에 신경을 써야한다.

        부하가 심해질 수 있다.

 

 

로그인 Ajax 처리

function Login() {
	$.ajax({
		url : "login_action.jsp",
		type : "POST",
		data : $("#login-register").serialize(),
		success : function(data) {
			if (data.trim() == "false") {
				$('#PasswordModal').modal();
			} else {
				window.location.href = "main/main.jsp";
			}
		},
		error : function() {
			$('#PolicyModal').modal();
		}
	});
}

 

data : $("#login-register").serialize(),

해당 아이디나 이름을 가진 폼의 정보를 가져온다.

function은 이벤트와 같다.

serialize()는 name1=value1&name2=value2 형식으로

serializeAraay()는 {name1=value1}, {name2=value2}의 형식으로 반환한다.

 

 

success : function(data) {
	if (data.trim() == "false") {
		$('#PasswordModal').modal();
	} else {
		window.location.href = "main/main.jsp";
	}
},

데이터를 가져오는 것을 성공한 경우

data.trim()으로 양쪽 공백을 제거

가져온 데이터가 없으면 modal 상자 띄움

데이터가 있으면 main폴더의 main.jsp로 연결

 

 

카테고리 삭제 Ajax 처리

function del_category(){
	if(confirm('정말로 삭제 하시겠습니까')) {
		$.ajax({
			url : "delete_category.jsp",
			type : "POST",
			data : {
				"cate_no" : $('#inputGroupSelect04').val()
			},
			success : function(data) {
				if (data.trim() == "false") {
					alert("중복된 카테고리 명이거나 오류가 있습니다.");
				} else {
					alert("카테고리가 삭제되었습니다.");
					location.reload();
				}
			},
			error : function() {
				alert("error");
			}
		});
	}
}

cate_no이라는 이름으로 inputGroupSelect04 셀렉트 박스의 선택된 value값을 보낸다.

location.reload(); 는 수정된 옵션 목록을 갱신한다.

 

<div class="input-group">
	<select class="custom-select" id="inputGroupSelect04" name="category" aria-label="Example select with button addon">
		<% for(CategoryDTO categoryDTO : cate_list) {%>
			<option value="<%=categoryDTO.getNo()%>"><%=categoryDTO.getCate_name()%></option>
		<% } %>
	</select>
	<div class="input-group-append">
		<button class="btn btn-outline-secondary" type="button" id="btnAdd" onclick="del_category()">삭제</button>
		<button class="btn btn-outline-secondary" type="button" id="btnAdd" onclick="add_category()">추가</button>
	</div>
</div>

categoryDTO라는 객체를 CategoryDTO타입으로 생성후 ArayList로 저장된 cate_list의 값 만큼 반복한다.

해당 id 사용자의 DB에 저장된 카테고리 목록을 출력한다.