1124_Spring : AJAX 성적처리

AJAX 를 왜 쓰느냐 ?

-> Guess : 전체 페이지를 서버로 보내는게 아니라 일부분만 업데이트 할 때 그 부분만 보낼 수 있어서 , 부분적으로 업데이트 하거나 그럴때 쓰임 (맞는지 확인 필수) 요새는 많이 쓰기 때문에 꼭 알아두어야한다!

 

AJAX를 위한 함수 설정

function ajaxFun(url, method, query, dataType, fn) {
	$.ajax({
		type:method,
		url:url,
		data:query,
		dataType:dataType,
		success:function(data) {
			fn(data);
		},
		beforeSend:function(jqXHR) {
		},
		error:function(jqXHR) {
			console.log(jqXHR.responseText);
		}
	});
}

type은 GET/POST 형식인지 

url은 서버 주소 어디로 가는건지

data는 말그대로 어떤 데이터를 보내는지

dataType JSON인지 HTML인지 

 

 

처음 page 로드할 때 list 불러오기

$(function () {
	listPage(1);
});

function listPage(page) {
	var url = "${pageContext.request.contextPath}/nscore/list";
	var query = "pageNo=" + page;
	var fn = function(data) {
		printJSON(data);
	};
	
	ajaxFun(url, "get", query, "json", fn);
}

데이터를 불러옴

 

AJAX - JSON으로 리스트 찍기

function printJSON(data) {
	$(".score-list").empty(); // 쌓지않고 페이징 처리를 할 것이므로
	
	var dataCount = data.dataCount;
	var total_page = data.total_page;
	var pageNo = data.pageNo;
	var paging = data.paging;
	
	var str;
	$(data.list).each(function(index, item) {
		var hak = item.hak;
		var name = item.name;
		var birth = item.birth;
		var kor = item.kor;
		var eng = item.eng;
		var mat = item.mat;
		var tot = item.tot;
		var ave = item.ave;
		
		str = "<tr align='center' height='33'></tr>";
		$(str).append("<td>"+hak+"</td>")
			.append("<td>"+name+"</td>")
			.append("<td>"+birth+"</td>")
			.append("<td>"+kor+"</td>")
			.append("<td>"+eng+"</td>")
			.append("<td>"+mat+"</td>")
			.append("<td>"+tot+"</td>")
			.append("<td>"+ave+"</td>")
			.append("<td><span class='btn-update'>수정</span> | <span class='btn-delete'>삭제</span></td>")
			.appendTo(".score-list");
	});
	
}

 

AJAX - JSON 자료 등록

hak=1111&name=유니코드&EE3343

$(function() {
	$("form[name=scoreForm]").submit(function() {
		var query = $(this).serialize();
		var url = "${pageContext.request.contextPath}/nscore/insert";
		
		var fn = function(data) {
			var state = data.state;
			if(state === "true") {
				$(".score-input input").each(function() {
					$(this).val("");
				});
				listPage(1);
				$("#hak").focus();
				
			} else if(state === "notUnique") {
				alert("등록된 학번입니다.");
				return false;
			} else if(state ==="false") {
				alert("추가가 실패했습니다.");
				return false;
			}
		};
		ajaxFun(url, "post", query, "json", fn);
		
		return false; // 서버로 전송하지 못하도록
	});
});

 

AJAX - JSON 자료 삭제

$(function() {
	$("body").on("click", ".btn-delete", function() {
		if(! confirm("자료를 삭제하시겠습니까 ? ") ) {
			return false;
		}
		
		// var hak = $(this).closest("tr").children().first().text();
		var hak = $(this).closest("tr").find("td:first").text();
		var url = "${pageContext.request.contextPath}/nscore/delete";
		var query = "hak="+hak;
		
		var fn = function(data) {
			var state = data.state;
			if(state === "true") {
				listPage(1);
			} else {
				alert("자료를 삭제하지 못했습니다.");
			}
		};
		ajaxFun(url, "post", query, "json", fn);
	});
});

 

AJAX - JSON 자료 수정

$(function() {
	var arr = [];
	
	$("body").on("click", ".btn-update", function() {
		var $tds = $(this).closest("tr").children("td");
		var names = ["hak", "name", "birth", "kor", "eng", "mat"];
		
		var s1, s2;
		$($tds).each(function(idx) {
			if( idx != $tds.length-1 ) {
				arr[idx] = $(this).text(); // 배열에 정보를 다 담음
				
				$(this).empty();
				if(idx < 3 || idx > 5) {
					
					s1 = "";
					if(idx <= 5) {
						s1 = " name='"+names[idx]+"' ";
					}
					
					s2 = "";
					if(idx == 0 || idx >= 6 ){
						s2 = " readonly = 'readonly' ";	
					}
					
					$(this).append("<input type='text' "+ s1 + s2 + " value='"+arr[idx]+"'>");
				} else {
					$(this).append("<input type='number' name='"+names[idx]+"' value='"+arr[idx]+"' min='0' max='100'>");
				}
				
			} else {
				$(this).empty();
				$(this).append("<span class='btn-updateOk'>완료</span> | <span class='btn-updateCancel'>취소</span>")
			}
		});
		
		$($tds[1]).find("input").focus();
		
		// 등록하기 줄의 모든 input과 버튼 비활성화 및 숨기기 
		$(".score-input input").prop("disabled", true);
		$(".score-input button").prop("disabled", true);
		$(".score-input").hide(100);
		
	});
	
	// 수정 완료
	$("body").on("click", ".btn-updateOk", function() {
		var query = $("form[name=scoreForm]").serialize();
		var url = "${pageContext.request.contextPath}/nscore/update";
		
		var fn = function(data) {
			var state = data.state;
			if(state === "true") {
				listPage(1);
				
				$(".score-input input").prop("disabled", false);
				$(".score-input button").prop("disabled", false);
				$(".score-input").show(100);
			} else {
				alert("자료를 수정하지 못했습니다.");
				
				$(".score-input input").prop("disabled", false);
				$(".score-input button").prop("disabled", false);
				$(".score-input").show(100);
			}
		};
		ajaxFun(url, "post", query, "json", fn);
	
	});
	
	// 수정 취소
	$("body").on("click", ".btn-updateCancel", function() {
		var $tds = $(this).closest("tr").children("td");
		$($tds).each(function(idx) {
			if(idx != $tds.length-1) {
				$(this).empty();
				$(this).text(arr[idx]);
			} else {
				$(this).empty();
				$(this).append("<span class='btn-update'>수정</span> | <span class='btn-delete'>삭제</span>")
			}
		});
		
		$(".score-input input").prop("disabled", false);
		$(".score-input button").prop("disabled", false);
		$(".score-input").show(100);
	});
});

 

jsp

<div class="container">

	<div class="title">
	   <h3><span>|</span> 성적 처리</h3>
	</div>
	
	<form name="scoreForm">
		<table class="score-table">
			<thead>
				<tr>
					<th width="80">학번</th>
					<th width="100">이름</th>
					<th width="100">생년월일</th>
					<th width="80">국어</th>
					<th width="80">영어</th>
					<th width="80">수학</th>
					<th width="80">총점</th>
					<th width="80">평균</th>
					<th>변경</th>
				</tr>
			</thead>
			<tbody class="score-input">
				<tr align="center" height="33">
					<td><input type="text" name="hak" id="hak" required="required"></td>
					<td><input type="text" name="name" id="name" required="required"></td>
					<td><input type="text" name="birth" id="birth" required="required"></td>
					<td><input type="number" name="kor" id="kor" min="0" max="100" required="required"></td>
					<td><input type="number" name="eng" id="eng" min="0" max="100" required="required"></td>
					<td><input type="number" name="mat" id="mat" min="0" max="100" required="required"></td>
					<td><input type="text" id="tot" readonly="readonly"></td>
					<td><input type="text" id="ave" readonly="readonly"></td>
					<td>
						<button type="submit" id="btnAdd">등록하기</button>
					</td>
				</tr>
			</tbody>
			<tfoot class="score-list"></tfoot>
		</table>
	</form>
	
</div>

 

Spring - Controller

package com.sp.app.nscore;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DuplicateKeyException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.sp.app.common.MyUtil;

@Controller("nscore.scoreController")
@RequestMapping("/nscore/*")
public class ScoreController {
	@Autowired
	private ScoreService service;

	@Autowired
	private MyUtil myUtil;
	
	@RequestMapping("main")
	public String main() throws Exception {
		
		return "nscore/main";
	}
	
	// 성적 리스트 : AJAX - JSON으로 결과 전송
	@RequestMapping("list")
	@ResponseBody
	public Map<String, Object> scoreList(
			@RequestParam(value = "pageNo", defaultValue = "1") int current_page,
			@RequestParam(defaultValue = "hak") String condition,
			@RequestParam(defaultValue = "") String keyword) throws Exception {
		
		int rows = 10;
		int dataCount, total_page;
		
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("condition", condition);
		map.put("keyword", keyword);
		
		dataCount = service.dataCount(map);
		total_page = myUtil.pageCount(rows, dataCount);
		if(current_page > total_page) {
			current_page = total_page;
		}
		
		int start = (current_page -1) * rows + 1;
		int end = (current_page * rows);
		map.put("start", start);
		map.put("end", end);
		
		List<Score> list = service.listScore(map);
		
		String paging = myUtil.pagingMethod(current_page, total_page, "listPage");
		
		Map<String, Object> model = new HashMap<String, Object>();
		
		model.put("list", list);
		model.put("dataCount", dataCount);
		model.put("total_page", total_page);
		model.put("pageNo", current_page);
		model.put("paging", paging);
		
		return model;
	}
	
	// 성적추가 : AJAX - JSON으로 결과 전송
	@RequestMapping(value = "insert", method = RequestMethod.POST)
	@ResponseBody // 메소드에서 반환하는 자바객체를 HTTP응답으로 변환하여 전송
	public Map<String, Object> scoreSubmit(
			Score dto
			) throws Exception {
		String state = "false";
		
		try {
			service.insertScore(dto);
			state = "true";
		} catch (DuplicateKeyException e) { // 중복학번일 경우
			state = "notUnique";
		} catch (Exception e) {
		}
		
		// @ResponseBody 애노테이션으로 인하여 Map 객체는 JSON으로 변환되어 전송된다.
		Map<String, Object> model = new HashMap<String, Object>();
		model.put("state", state);
		return model;
	}
	
	// 자료 수정 : AJAX - JSON
	@RequestMapping(value = "update", method = RequestMethod.POST)
	@ResponseBody
	public Map<String, Object> updateScore(
			Score dto) throws Exception {
		String state = "false";
		
		try {
			service.updateScore(dto);
			state = "true";
		} catch (Exception e) {
		}
		
		Map<String, Object> model = new HashMap<String, Object>();
		model.put("state", state);
		return model;
	}
	
	// 자료 삭제 : AJAX -JSON
	@RequestMapping(value = "delete", method = RequestMethod.POST)
	@ResponseBody
	public Map<String, Object> deleteScore(
			@RequestParam String hak) throws Exception {
		String state = "false";
		
		try {
			service.deleteScore(hak);
			state = "true";
		} catch (Exception e) {
		}
		
		Map<String, Object> model = new HashMap<String, Object>();
		model.put("state", state);
		return model;

	}
	
}