목차
1. ajax/json이란?
2. jquery 다운로드
3. java->json 변경 다운로드 및 설정
4. controller 패키지 추가 될 때 설정
5. ajax로 방명록 만들기
- select
- insert&select
jquery 요청
$.ajax({
url : "${pageContext.request.contextPath }/api/gb/add",
type : "post",
contentType : "application/json",
data : {name: ”홍길동"},
dataType : "json",
success : function(result){
/*성공시 처리해야될 코드 작성*/
},
error : function(XHR, status, error) {
console.error(status + " : " + error);
}
});
- ajax/json이란?
: jquery (javascript)
ajax : ( Asynchronous Javascript XML )
자바 스크립트를 이용해서 서버에서 데이터를 가지고 가져와
페이지 전체의 갱신없이 특정 부분만 변경
주고 json으로 서버와 데이터를 주고 받는다
json : (JavaScript Object Notation)
경량의 DATA-교환 형식
- jquery 다운로드
: 자바스크립트 --> jquery로 변경
1) 해당 프로젝트안에 jquery 파일 넣기
2) 상단에 정의(주소 잘 확인할 것)
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/jquery-1.12.4.js"></script>
- java->json 변경 다운로드 및 설정
다운로드 : pom.xml
<!-- jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.7</version>
</dependency>설정 : spring-servlet.xml
<mvc:annotation-driven>
<mvc:message-converters>
<bean
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>application/json; charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
- controller 패키지 추가 될 때 설정
: 핸들러맵핑에서 확인할 수 있도록 spring-servlet.xml에 controller 추가 !!!! 그래야 해당 컨트롤러를 읽을 수 있다
- ajax로 방명록 만들기
: 데이터만 요청해서 받는 방법
1. 리스트 가져오기
:데이터만 요청해서 받는 방법
2. 등록
:데이터를 보내서 등록한 뒤, 한 사이클에서 selectOne으로 데이터를
받는다
1. 리스트 가져오기 순서
: 화면까지 전체 다 받고싶은 경우 기본 자바 요청방식을 사용하고,
데이터만 받을 경우 ajax를 사용하여 요청
1) 빈 화면 띄우고 데이터만 요청해서 받아온다.
: js로 데이터랑 html을 섞어서 작업 (화면코드에 데이터를 넣는것)
- 컨트롤러 생성 후 요청을 받는다
*(한사이클에 이루어진다)
controller가 요청을 받아서 jsp화면 그려줌(ajax controller) -> ajax(jsp)로 데이터만 요청 -> 데이터만 받음
2) js-> jquery 파일 설정
- 파일 넣기
참고!!
목차)) 2. jquery 다운로드 자바스크립트 --> jquery로 변경 - jsp에 js 제이쿼리 코드 설정하기
형태 :
//리스트 출력(그리기)
function fetchList(){
$.ajax({
//-------보낼때
//요청할 컨트롤러 주소
url : "${pageContext.request.contextPath }/api/guest/list",
//주소창이 변하지 않기 때문에 post,get 방식 모두 동일
type : "post",
/* contentType : "application/json",
data : {name: "홍길동"}, */
//-------받을때
dataType : "json",
success : function(guestbookList){//json-->js로 변환되어 들어옴
/*성공시 처리해야될 코드 작성*/
console.log(guestbookList);
//console.log(guestbookList[0].name);
//객체 리스트 돌리기 (화면 출력을 시킴!)
for(var i = 0; i<guestbookList.length; i++){
//그리기(guestbookList);
render(guestbookList[i], 'down'); // 그리기
}
},
error : function(XHR, status, error) {
sole.error(status + " : " + error);
}
});
}3) ajax 요청 코드 작성
: jsp
- 이벤트 걸어주기
여기서는 로딩준비시에 이벤트 걸어줌
(화면이 그려지기 전에)
-->페이지 로딩완료시 데이터를 가져오게할경우 화면 불러오는게 느려지고 중간에 업데이트되는 것을 반영하지 못한다.
형태 : 기능(동작)은 함수(function(){})에 넣어준다
//문서가 준비되면
$(document).ready(function(){
/* 리스트 그리기 */
fetchList();
console.log("리스트요청");
});4) 화면 그려주기
형태 :
//리스트 그리기(html)
function render(guestbookVo, updown){//guestbookList
var str = '';
str += ' <table class="guestRead"> ';
str += ' <colgroup>';
str += ' <col style="width: 10%;"> ';
str += ' <col style="width: 40%;"> ';
str += ' <col style="width: 40%;"> ';
str += ' <col style="width: 10%;"> ';
str += ' </colgroup>';
str += ' <tr> ';
str += ' <td>'+guestbookVo.no+'</td> ';
str += ' <td>'+guestbookVo.name+'</td> ';
str += ' <td>'+guestbookVo.regDate+'</td> ';
str += ' <td><a href="${pageContext.request.contextPath}/guest/deleteForm?no=${guestVo.no}">[삭제]</a></td> ';
str += ' </tr> ';
str += ' <tr> ';
str += ' <td colspan=4 class="text-left">'+guestbookVo.content+'</td> ';
str += ' </tr> ';
str += ' </table> ';
if(updown == 'down'){
$("#listArea").append(str); // id안에 html을 넣어라
}else if(updown == 'up'){
$("#listArea").prepend(str);
} else{
console.log("방향오류")
}
};5. 데이터 가져오기
: service -> dao 데이터 요청
이미 존재하는 dao사용할 수 있음
★ autowired 해줘야함
-> 사용할 service를 메모리에 올리는 작업
controller 리스트에 담기(데이터가 담기는 것)
6.컨트롤러에서 받아올 데이터를 response body로 데이터 보내기
@ResponseBody
- controller : java->문자열(json으로) 보내라고 정의
==> return 값에 데이터 주소를 바로 넣어줌(리다이렉트, 포워드가 아니라고 표시)
7. json으로 변경하는 설정
: 목차)) 3번 참고 !
- jsp에 데이터 받아오는 것 (배열로 들어감)
ajax코드에 success:function()에 넣는다
json-->js로 변경된것
8. 화면에 가져온 데이터 넣기
: 응답을 받은 ajax코드 -> success함수 안에 넣는다
이 작업은 함수(function)로 빼서 주소만 넣어준다 (코드가 길어서)
1) html 화면 그리기
문자열로 만든다 띄어쓰기 자리 맞춰서 잘할 것
★순서를 만들어주도록 $('#').append 등 사용시
console에서 들어오는 순서 확인하고 사용(vo 필드명)
//리스트 그리기(html)
function render(guestbookVo, updown){//guestbookList
var str = '';
str += ' <table class="guestRead"> ';
str += ' <colgroup>';
str += ' <col style="width: 10%;"> ';
str += ' <col style="width: 40%;"> ';
str += ' <col style="width: 40%;"> ';
str += ' <col style="width: 10%;"> ';
str += ' </colgroup>';
str += ' <tr> ';
str += ' <td>'+guestbookVo.no+'</td> ';
str += ' <td>'+guestbookVo.name+'</td> ';
str += ' <td>'+guestbookVo.regDate+'</td> ';
str += ' <td><a href="${pageContext.request.contextPath}/guest/deleteForm?no=${guestVo.no}">[삭제]</a></td> ';
str += ' </tr> ';
str += ' <tr> ';
str += ' <td colspan=4 class="text-left">'+guestbookVo.content+'</td> ';
str += ' </tr> ';
str += ' </table> ';
if(updown == 'down'){
$("#listArea").append(str); // id안에 html을 넣어라
}else if(updown == 'up'){
$("#listArea").prepend(str);
} else{
console.log("방향오류")
}2) 원래 그려져야할 공간을 만들고
id를 준뒤 거기에 html 그린 함수를 넣어준다
3) ajax 코드에 함수실행() 선언으로 for문 돌려줌
: 리스트일 경우(전체 출력)
//객체 리스트 돌리기 (화면 출력을 시킴!)
for(var i = 0; i<guestbookList.length; i++){
//그리기(guestbookList);
render(guestbookList[i], 'down'); // 그리기
}
2. 등록 + 등록한 vo 데이터 가져오기
데이터 등록(insert&select)
: 데이터를 등록하면 리스트에 변경된 부분만 다시 그려주는것
등록한 한사람 데이터만 받아온것
1) controller에서 등록 데이터 받음
2) js 이벤트 만들기
: 등록 버튼 클릭시 요청되도록
3) 보낼 데이터를 모아서 vo로 만들기
html에서 form태그는 사용하지 않는다(?파라미터 주소 형태로 보내는것이 아니라서)
- 보낼 데이터 모으기
이벤트 안에서 .val()
객체로 vo로 만들어준다 바로 만들 수 있음(하단코드 name참고)
//2. 등록 //저장버튼이 클릭될 때 이벤트
$("#btnSubmit").on("click",function(){
console.log("버튼클릭");
//폼에 데이터를 모아야한다.
//var name = $("#input-uname").val(); //이름
var password = $("#input-pass").val(); //패스워드
var content = $("[name='content']").val(); //컨텐츠
//js객체 만들기
var guestbookVo = {
name : $("#input-uname").val(),
password : password,
content : content
};
//확인
console.log(guestbookVo);
//요청
$.ajax({
//----보낼때
url : "${pageContext.request.contextPath }/api/guest/write",
type : "post",
//contentType : "application/json",
//주소 파라미터로 데이터 전달 {필드명:값}
//data :{name : name, password : password,content : content},
data : guestbookVo,
//----받을때
dataType : "json",
success : function(guestbookVo){
/*성공시 처리해야될 코드 작성*/
console.log(guestbookVo);
render(guestbookVo, 'up');
//입력화면 초기화
$("#input-uname").val("");
$("#input-pass").val("");
$("[name='content']").val("");
},
error : function(XHR, status, error) {
sole.error(status + " : " + error);
}
});
});4) ajax코드 data로 모아놓은 데이터 객체 보내줌
: ajax로 보내도 파라미터로 간다
@modelAttribute로 vo 받음
5) service에서 일을 나눠야한다.
:dao는 하나의 메소드에 한 쿼리문만 가지고있어야 한다
insert와 select를 한 사이클에서 해야하기 때문에
service에서 일을 나눠준다
6) dao에서 mybatis insert & selectOne
insert : 받아온 데이터 등록
★selectOne : 쿼리문에서 필요한 데이터를 가지고 와야한다
insert 데이터와 select데이터가 다르고,
insert가 선행되기 때문에 no번호를 알 수 없다 (등록시 시퀀스 작동 등록)
7) xml 쿼리문
1) insert --> 시퀀스 번호를 먼저 건드린 뒤 등록한다
2) insert를 하고 select로 가져옴
select로 데이터를 가져올때는
0x999
8) json로 데이터만 보내기
등록한 한개의 데이터만 가는것
9) 데이터 화면에 붙이기
if문 활용해서 데이터 테이블 붙이는 위치 정해주기
0개의 댓글
