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;
}
}