Frontend57 02. AJAX, 회원등록 아이디 중복 체크 ○ 회원등록 아이디 중복 체크 1) 뷰단 회원등록폼 아이디 2) 컨트롤러 //아이디 중복확인 페이지 불러오기 //결과확인 http://localhost:9095/member/idcheckform1.do @RequestMapping("member/idcheckform1.do") public String idCheckForm1() { return "/member/idCheck"; }//idCheckForm1() end @RequestMapping("member/idcheckproc1.do") private void idCheckProc1(HttpServletRequest req, HttpServletResponse resp) { try { String userid=req.getParameter("userid.. 2022. 6. 30. 01. AJAX (jQuery AJAX 관련 메소드, $.ajax()함수, $.get() 함수, $.post 함수) ○ AJAX (Asynchronous JavaScript And XML) - 웹페이지 전체를 reload하지 않고, 일부분만 새로고침 - 비동기식 통신(문자단위 통신) - 전체 페이지는 1번만 불러오고, 그 이후에는 문자단위(비동기)로 통신이 이루어 진다 - 자바스크립트의 XMLHttpRequest객체를 이용하지만, 사용문법이 복잡해서 jQuery 오픈소스의 ajax() 함수를 많이 이용한다 ○ AJAX - 페이지 새로고침 없이 서버에 요청 - 서버로부터 데이터를 받고 작업을 수행 ○ jQuery AJAX 관련 메소드 - $.ajax() - $.get() - $.post() - 응답받은 메시지를 처리하는 함수를 callback함수라 한다 ○ $.ajax() 함수 - 형식) $.ajax()({name:va.. 2022. 6. 28. 07. Bootstrap, 그리드 시스템 (Grid System) ○ Container - 12개의 칼럼을 지원하는 시스템 - 한줄(row)는 총 12칸으로 구성 ○ 동일한 열 너비 - 단위 없는 클래스를 원하는 수만큼 추가하면 모든 열의 너비가 동일 1 / 2 2 / 2 1 / 3 2 / 3 3 / 3 ○ 열 너비 설정 - 한 열의 너비를 설정하면 형제 열은 자동으로 크기를 조정 1 / 3 2 / 3 3 / 3 1 / 3 2 / 3 3 / 3 ○ 반응형 클래스 - 6개의 기본 그리드 계층 ① .col (xs) : 항상 가로로 배치 ② .col-sm-* : 576px 이하에서 세로로 표시 시작 ③ .col-md-* : 768px 이하에서 세로로 표시 시작 ① .col-lg-* : 992px 이하에서 세로로 표시 시작 ② .col-xl-* : 1200px 이하에서 세로로.. 2022. 6. 26. 06. Bootstrap, 컨테이너 (container) ○ Container - Bootstrap에서 가장 기본적인 레이아웃 요소 - 기본 그리드 시스템을 사용할 때 필요 - 내용을 정렬하는데로 사용 - 종류 ① .container : 좌우여백 있음 ② .container-fluid : 좌우여백 없음 container Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure d.. 2022. 6. 25. 05. Bootstrap, 모달창 (Modal) ○ 모달(Modal) VS 팝업(Popup) ① 팝업 - 부모창과 자식창이 서로 독립적 관계 - 현재 화면에 다른 화면을 하나의 창으로 보여줌 - wondow.open() 함수 사용 ② 모달 - 부모창과 자식창이 한몸으로 구성되어 있음 - 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리 - 모달은 새로운 태그는 아니고, 이벤트에 따라 의 display를 조절해주는 것 - 팝업창은 모바일에서 뜨지 않거나 문제가 생기는 경우가 많아 최근에는 모달을 주로 사용함 ○ 모달(Modal) ① Bootstrap3 Open Modal × Modal Header Some text in the modal. Close ② Bootstrap4 Open modal Modal Heading × Modal body... 2022. 6. 24. 04. Bootstrap3, Input (text, password, textarea, checkbox , radio, select) ○ Text, Password Name: Password: ○ Textarea Comment: ○ Checkbox Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ○ Radio Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ○ Select Select list (select one): 1 2 3 4 Mutiple select list (hold shift to select more than one): 1 2 3 4 5 ○ Input 크기 Default input input-lg input-sm 2022. 6. 24. 이전 1 2 3 4 ··· 10 다음
