Written by spring-style
on 2021-11-25

1124_Spring : AJAX 성적처리

AJAX 를 왜 쓰느냐 ?

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

AJAX를 위한 함수 설정

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 = ""; $(str).append(""+hak+"") .append(""+name+"") .append(""+birth+"") .append(""+kor+"") .append(""+eng+"") .append(""+mat+"") .append(""+tot+"") .append(""+ave+"") .append("수정 | 삭제") .appendTo(".score-list"); }); }

AJAX - JSON 자료 등록

hak=1111&name;=유니코드

$(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(""); } else { $(this).append(""); } } else { $(this).empty(); $(this).append("완료 | 취소") } }); $($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("수정 | 삭제") } }); $(".score-input input").prop("disabled", false); $(".score-input button").prop("disabled", false); $(".score-input").show(100); }); });

jsp

| 성적 처리 학번 이름 생년월일 국어 영어 수학 총점 평균 변경 등록하기

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 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 map = new HashMap(); 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 list = service.listScore(map); String paging = myUtil.pagingMethod(current_page, total_page, "listPage"); Map model = new HashMap(); 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 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 model = new HashMap(); model.put("state", state); return model; } // 자료 수정 : AJAX - JSON @RequestMapping(value = "update", method = RequestMethod.POST) @ResponseBody public Map updateScore( Score dto) throws Exception { String state = "false"; try { service.updateScore(dto); state = "true"; } catch (Exception e) { } Map model = new HashMap(); model.put("state", state); return model; } // 자료 삭제 : AJAX -JSON @RequestMapping(value = "delete", method = RequestMethod.POST) @ResponseBody public Map deleteScore( @RequestParam String hak) throws Exception { String state = "false"; try { service.deleteScore(hak); state = "true"; } catch (Exception e) { } Map model = new HashMap(); model.put("state", state); return model; } }

from http://development-writing.tistory.com/356 by ccl(S) rewrite - 2021-11-25 02:01:57

Top