자바 내용 더하기
- 톰캣이 비정상적으로 종료된 경우 : 뒤에서 돌아가고있기 때문에 오류가 난다. 작업관리자 -> 백그라운드 -> javaw 종료
- ajax에서 데이터 보낼 때
: 객체로 보내줘야한다.
: controller에서 @RequestParam으로 받을 수 있다.
형태 @RequestParam("name") String name- html 그리는것을 해결하기 위해서 vue/리엑트 언어 사용
- ajax사용시 기명함수는 호출해서 사용하기 때문에 아무곳에 위치해도된다. 따라서 하단에 몰아서 정리해주고,
익명함수는 필요한 곳에 위치하도록 해줌
목차
1. bootstrap : 부트스트랩
2. data-key값 = ""
3. alert();
4. ajax->delete 순서
5. ★ajax에서 java로 넘어가는 중간 단계
6. 회원가입폼 -> 등록 ajax 순서
7. 등록 json형태로 요청하기
8. jquery에서 형제요소 찾아가기 / jquery 부모 요소 찾기
- bootstrap : 부트스트랩
: 화면기능 템플릿
특징 :
- 트위터 만든 회사에서 제작한 것으로 구조화되어 있다.
- 제이쿼리와 함께 사용이 가능하다
- 각 회사마다 기업의 이미지가 있기 때문에 부트스트랩으로 다 사용하지 않지만, 관리자 페이지 같은것 만들 때 좋음
!단점으로! 다른 코드까지 가지고와야 하기 때문에 프로그램이 무거워진다
관리자 페이지는 사용자가 많지 않아서 가능 - si업체에서는 관리자 페이지를 부트스트랩으로 많이 만듬
- 부트스트랩 파일중에서 .min파일은 미니멈으로 css정의해 놓은 코드를 한줄로 써놓은 것이다. -> 줄바꿈 기호까지 줄이기 위해서
형태 : 각 기능마다 설명서를 보고 필요한것만 가져와야함
부트스트랩
1. 부트스트랩 파일 다운받기
2. 부트스트랩 경로지정
★jquery 아래에 위치하도록 해야한다(jquery를 사용하는것을 전재로 하기 때문에)
<script src="js/bootstrap.min.js"></script>- 부트스트랩 css
: css 상단에 위치(파일 경로 지정해주기)
내가 만든 css와 겹치지 않도록 부트스트랩을 사용할 경우
부트스트랩css를 쓰고 이외에 필요한 부분만 css로 만들어서 사용하는것이
충돌을 막을 수 있다.
<link href="${pageContext.request.contextPath}/assets/bootstrap/css/bootstrap.css" rel="stylesheet">- 원하는 코드 가져와서 사용하기
*jquery ui 사이트
> 2. data-key값 = "" : html 태그에서 data 전달하기 ★항상 소문자로 써야한다
: 테이블에서 데이터를 삭제하는 경우, no & password를 보내줘야하는데.
no의 경우 테이블에서 가져와야하는 값이다.
이런 경우에는 jquery 형제요소를 찾아가거나 부모요소를 찾아가야한다
●data-key값을 사용하는 방법으로 태그에 data를 숨겨주는것
형태:
str += ' <td><button class="btnDelPop" type="button" data-no="'+guestbookVo.no+'">삭제</button></td> ';1) 태그에 받은 데이터를 넣어준다
: no는 자신이 보낼 keyname
2) 값 꺼내쓰기
: 데이터를 모음
- alert(); 기본 팝업창
형태 :
alert("비밀번호를 확인하세요");
- ajax->delete 순서
: ajax를 이용해서 다른 페이지로 넘어가는 구조는 비효율적이다.
넘어가는 html화면을 전부 짜줘야하기 때문에
deleteForm으로 넘어가는것을 팝업창으로 해결
1. 삭제 버튼 이벤트 잡기
클릭하면 팝업이 뜨도록 -> a링크 사용하는것이 아님
2. bootstrap 팝업창 사용
: 목차 1번 bootstrap 참고
3. ★dom 작업 이후에 생긴 html
html로 새로 그려진 내용은 dom작업 이후에 태어난 것이다.
따라서 부모에 이벤트를 걸어줘야 한다.
html그려준 것이기때문에 div로 공간 잡아준 곳에 걸어줌
버튼이 많은 경우 (누른 버튼만 작동하도록)
각각 id값을 다 다르게 주면 되지만
html로 자동 생성되는경우에는 따로 개별적으로 id값을 줄 수 없다
1) 화면 html 태그 위치
2) 부모 #listArea에 걸어주고 .btnDelPop에 위임해준다.
: 위임하지 않으면 listArea어느곳을 눌러도 이벤트가 걸리기 때문에
★html로 태생부터 있었던 애와 ajax로 끼어든 애 차이
jquery exam 실습15번 참고
4. 팝업창 초기화 작업
: 팝업창에 글을 남긴 뒤 다시 버튼을 누르면 이전 내용이 남아있다.
이것을 종료시 초기화 하는 작업
--> 사이트 페이지 하단에 숨겨뒀다가 다시 보이게 하고, 닫기 누르면 없어지는 것이 아니라 하단에 숨겨지는 로직이라서
형태 : 이전 텍스트 초기화를 해주고 + 번호 가져오고 + 팝업창 띄워주는 순서
$('#modalPassword').val('');
5. 태그에 데이터 남기고 꺼내쓰기
:목차 2번 참고
data-key값
6. 모달창(오픈상태)에서 삭제버튼을 클릭했을 때
1) 삭제 버튼 이벤트 잡기
$('#modalBtnDel').on('click',function(){
console.log('모달창 삭제버튼 클릭')
})2) 데이터 수집
:password는 파라미터로 전달되기 때문에 필드명과 맞춘것 이후 코드를 생각해서
//1. 데이터 수집(객체로 만들어서 보내주거나, 직접 넣기)
var pw = $('#modalPassword').val();
var no = $('#modalNo').val();
var delInfoVo = {
no : no,
password : pw
}
console.log(delInfoVo);깃허브에서 삭제는 기존의 것을 사용할 수 있는데,
이전에 delete를 map을 활용하여 작성하여서
강사님의 코드를 다시 넣었다.
7. 비밀번호 입력 성공과 실패시
//1-2. ajax 요청 no & password
$.ajax({
url : "${pageContext.request.contextPath }/api/guest/remove",
type : "post",
//contentType : "application/json",
data : delInfoVo,
dataType : "json",
success : function(state){
if(state=='success'){
//2. 화면에서 변경되는 부분 반영
// 해당 테이블 html 삭제
$('#t'+no).remove();
// 모달창 닫기
$('#delModal').modal('hide');
}else {
//$('#delModal').modal('hide');
alert("비밀번호를 확인하세요");
$('#modalPassword').val('');
}
},
error : function(XHR, status, error) {
console.error(status + " : " + error);
}
}); 1) controller
: 기존 코드를 사용하지만, vo로 보내줘야하기 때문에 vo로 처음부터 묶어주는것이 좋다.
2) service
: ★service에서 기능을 전부 구현해줘야한다!!
if문의 경우 기능은 service에서 해결한뒤 나중에 ajax에는 결과 문자열만 보내준다. 성공이면 성공 실패면 실패
3) dao/sql.xml 일반 spring코드 사용
- ★ajax에서 java로 넘어가는 중간 단계
: 회원가입폼 ->★-> 등록
일반적으로 회원가입폼 양식에서 데이터를 빼먹을 경우,
등록폼으로 전달되지 못하도록 중간에 확인해주는 작업이 필요하다
자바까지 가지 못하도록
이때 jquery를 통해서 중간 역할을 할 수 있다.
시나리오 :
회원가입폼 -> 양식 작성 -> 양식 작성여부 확인 -> jquery에서 java로 보내줌 -> java에서 처리 -> main페이지 리다이렉트
==> 리다이렉트로 새로운 화면을 만들어줘야하기때문에 ajax로 할 수 없다
==> ajax로 중간 역할을 할 수 있음.
형태 :
- 등록 json형태로 요청하기
: 파라미터 형태 / json 형태 -> 둘다 ajax로 한 것 파악해둘 것
:json으로 요청해서 json으로 받는것
★json형태로 요청하는것은
jquery에서부터 json으로 변경해서 보낸다
따라서 요청문서에 파라미터가 아닌,
requestBody에 json문자열로 java에 가는것
*자바에서 꺼내쓸 때 자바코드가 아니기때문에 데이터를
@ModelAttribute / @requestParam으로 꺼낼 수 없다
요청 : json형태의 문자열이 요청문서 requestBody를 통해 java로 전달
자바에서 꺼내쓸 때 : @RequestBody에서 꺼낸다
@RequestBody GuestbookVo guestbookVo★controller
★addList.jsp
: JSON.stringify --> json형태로 변경해주겠다
: contentType --> "application/json",
보낼때 json으로 보내겠따고 매타태그처럼 보내주는 것
**//json문자열로 온것이다. java언어로 온것이 아님. 파라미터 않씀
다른 기술
중간 포맷으로 요청 응답한것
