✨ Front-end/jQuery13 [jQuery] Ajax에서 serialize()로 form 데이터 모두 넘기기 HTML 삽입 미리보기할 수 없는 소스 JSP 위 jsp의 form 태그안에 있는 데이터들을 ajax에서 한번에 넘겨줄 것이다. js 원래대로라면 주석과 같이 컨트롤러로 데이터를 넘길때, 하나하나 지정해주어야하지만, serialize()를 사용하면 데이터들이 name에 준 이름으로 한번에 넘어간다. Send 버튼을 누르면 데이터들이 알아서 직렬화되서 이름에 맞게 넘길 수 있다. DTO와 컨트롤러 CardFormBean 객체를 생성해서 컨트롤러에서 바로 찍어봐도 매개변수가 같으면 값이 찍히는걸 확인할 수 있다. 2023. 9. 13. [jQuery] RestApi 사용해서 Ajax 데이터 뽑아내기 DB데이터에 저장된 데이터 뽑기 컨트롤러 DB에 저장된 데이터들을 조회하여 컨트롤러에서 List에 담긴 데이터들을 Ajax로 return 시키는 것이다. HTML 삽입 미리보기할 수 없는 소스 $(v).each(function(index, x) { ... });: 이 부분은 서버에서 받은 데이터(v)를 순회하면서 각 항목을 처리한다. $(v)는 받은 데이터를 jQuery 객체로 변환한다. .each() 함수를 사용하여 데이터를 순회하며 각 객체(x)에 대한 처리를 수행한다. *아래에서 자세히 예제들어 설명 내부 순회($(Object.keys(x)).each(function(index, xx) { ... })): 각 객체(x)의 속성을 순회하면서 테이블의 헤더()와 데이터()를 생성한다. Object.ke.. 2023. 9. 13. [jQuery] JSON 데이터 띄우기 (prop, each, attr) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 다른 jsp 파일을 만들어 JSON 객체로 데이터를 넣어주었다. ajax 함수를 생성해서 url로 JSON 객체 지정했던 걸 넣어주고, 하나씩 체크될 때마다 ajax를 실행시켜줄것이다. 결과화면 개발자 모드로 가서 콘솔을 확인해 보았더니 이렇게 데이터가 찍혀있는걸 확인해볼 수 있다. HTML 삽입 미리보기할 수 없는 소스 이렇게 박아 넣어주면 된다. 하나더 연습해보려고한다. jp1Ajax.jsp HTML 삽입 미리보기할 수 없는 소스 jsp 파일에 JSON 객체를 생성해주었다. view (html과 jQuery) view 페이지가 열리면 이렇게 select 박스가 뜨게되면서 웹 페이지 로딩 후 jQuery가 실행되도록.. 2023. 9. 7. [jQuery] prop이용해서 checkbox 전체 체크 선택 및 해제 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 .is(':checked') 체크 박스가 체크되었는지 확인하는 요소이다. .prop('checked', !checked) 이전에 확인한 checked 변수의 반대 값을 사용하여 모든 체크박스의 체크 상태를 변경한다. 즉, 만약 "전체 선택" 체크박스가 체크되어 있다면, 모든 체크박스가 체크 해제되고, 그 반대의 경우에는 모든 체크박스가 체크된다. 만약 Click1 의 버튼만 활성화 하고싶다면 HTML 삽입 미리보기할 수 없는 소스 .eq(0) 와 같이 위 코드에 한줄만 추가해주면 된다. 2023. 9. 7. [jQuery] Click시 만들어 놓은 CSS 스타일 넣어주기 보호되어 있는 글 입니다. 2023. 9. 7. [jQuery] 입력 문자열 제한 keyup( ) 과 slice( ) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $('textarea').keyup(function(){ ... }); textarea 요소에서 키보드 이벤트(keyup)를 감지하고 그에 따른 동작을 정의한다. keydown : 키보드가 눌러지는 순간 발생 keypress : 글자가 입력될때 발생 keyup : 입력후 손가락이 떼어질때 발생 var inputLength = $(this).val().length; 현재 textarea의 값(입력된 텍스트)의 길이를 계산하여 inputLength 변수에 저장한다. slice(0, 10) 이 메서드는 문자열의 일부분을 추출하거나 잘라내는 데 사용된다. 0: 시작 인덱스 10: 종료 인덱스 이 경우 10은 문자열에서 추출하려는 부분.. 2023. 9. 5. [jQuery] 버튼 hover로 색상변경 addClass, removeClass HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $(this).addClass('btnColor') 현재 버튼에 btnColor라는 클래스를 추가한다. 버튼에 클래스가 추가되면 버튼의 스타일이 변경될 수 있다. $(this).removeClass("btnColor") 현재 버튼에서 btnColor 클래스를 제거한다. 버튼의 스타일이 원래대로 돌아간다. 2023. 9. 4. [jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기 JSON 표기법 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 배열 HTML 삽입 미리보기할 수 없는 소스 ID : admin pw : 1234 로그인 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 2023. 9. 4. [jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var pass1=$('#pwd1').val(); 비밀번호 필드(#pwd1)에서 입력된 값을 가져와 변수 pass1에 저장한다. var pass2=$('#pwd2').val(); 비밀번호 확인 필드(#pwd2)에서 입력된 값을 가져와 변수 pass2에 저장한다. if(pass1==pass2) { ... } else { ... }: pass1과 pass2를 비교하여 비밀번호가 일치하는지 확인한다. $('#result').html(...): 결과 메시지를 표시할 요소(#result)의 내용을 변경한다. .css(...)를 사용하여 텍스트의 색상을 변경한다. 일치할 경우 녹색('green'), 일치하지 않을 경우 빨강('red')으.. 2023. 9. 4. [jQuery] innerHTML, text 바꾸기 HTML 삽입 미리보기할 수 없는 소스 기존 javaScript를 이용해서 텍스트를 박아넣는 형식을 jQuery로 바꾸어보았다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var str=$('#txt').val(); 텍스트 입력 필드(#txt)에서 입력된 값을 가져와 변수 str에 저장한다. $('#view1').text(str);: 변수 str의 내용을 요소(#view1)의 텍스트로 설정하여 출력한다. 출력2 버튼도 위와 같은 방식으로 작동되는 것이다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 .css({...}) .css() 메서드를 사용하여 요소의 스타일을 변경한다. 여기서는 텍스트의 색상('color'), 글꼴 굵기('fon.. 2023. 9. 4. [jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade) show()와 hide() HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $().ready(function(){ ... }); 이 부분은 문서가 로드될 때 실행할 JavaScript 코드를 정의하는 부분이다. $().ready(...) 또는 $(document).ready(...)와 같이 사용되며, 페이지가 완전히 로드되었을 때 내용을 실행다. $('#btn1').click(function(){ ... }); "보이기" 버튼(#btn1)이 클릭되었을 때 실행할 코드를 정의한다. 이 코드는 텍스트 입력 필드를 선택하여 show() 메서드 or hide() 메서드를 호출하여 표시한다. toggle(), slideup(), fade() HTML 삽입 미리보기할 수 없는 소스 H.. 2023. 9. 4. [jQuery] 가장 기초적인 $( function() { .... } 에 대해 $( function() {... } 란? 자바스크립트의 $(document).ready(function() { ... }); 을 축약한 jQuery이다. HTML 삽입 미리보기할 수 없는 소스 두 코드 모두 웹 페이지의 DOM 요소가 완전히 로드 되었을 때 실행된다는 것이다. 즉, 웹 페이지의 HTML 구조가 완전히 로드되고 초기화되서 사용자에게 표시되기전까지 기다린다. HTML 삽입 미리보기할 수 없는 소스 그렇다면 이 두개는 무슨 차이가 있을까? 코드를 적용해보면 페이지로 들어왔을 때 2가 먼저 출력이 되고 이후 1이 출력이된다. alert(2) 이 코드는 스크립트가 로드되면 즉시 실행되기 때문이다. 웹 페이지 로딩과는 관련이없으며, 스크립트가 로드되는 즉시 실행된다. 주로 초기화와 관계없는 간단한.. 2023. 9. 4. 이전 1 2 다음
