[jQuery] Ajax의 Success와 Done의 차이
2022. 9. 30. 20:39
프로그래밍/jQuery
Ajax의 동작 방식 브라우저에서 Ajax 요청을 담당하는 XMLHttpRequest라는 객체를 통해 서버에 정보를 요청, 응답받음 콜백 동작 순서 성공 시 : success > complete > done > always 실패 시 : error > complete > fail > always jQuery를 이용한 Ajax Ajax의 기본 Method를 이용하면 XMLHttpRequest를 직접 사용하게 되는데 때문에 이러한 복잡한 과정 없이 jQuery를 이용하면 간단하게 서버와 데이터를 주고받을 수 있음 또한 크로스 브라우징 문제도 jQuery가 알아서 해결해주고 여러 가지 편리한 기능들을 제공 $.ajax([settings]) 함수의 property https://api.jquery.com/jque..
[jQuery] 페이지마다 다른 버전의 jQuery 로드하기 (with Autocomplete)
2022. 9. 20. 20:42
프로그래밍/jQuery
페이지마다 다른 버전의 jQuery 로드하기 jQuery의 autocomplete 기능이 TypeError: $(...).autocomplete is not a function 에러가 뜨며 기능이 동작하지 않음 autocomplete 기능이 jQuery의 모든 버전에서 작동하는 것이 아니기 때문 기능이 작동하는 jQuery 버전(1.12.1)을 사용하기 위하여 페이지에 필요한 페이지에서만 가져와 사용하기로 함 다른 버전의 jQuery가 필요한 페이지에 jQuery 로드하여 변수로 지정해놓고 필요한 곳에 지정해놓고 사용 1️⃣ 필요한 페이지 상단에 모듈 불러오기 2️⃣ script 태그 안에 변수로 지정해놓기 3️⃣ 필요할 때 사용 - $(document) 대신 $j112(document) 이런 식으로 사..
[jQuery] ajaxSubmit() - form 태그 submit 비동기 처리
2022. 8. 31. 20:31
프로그래밍/jQuery
ajaxSubmit() ❓ jQuery 플러그인으로 form태그 내부의 데이터를 비동기 처리해 줌 특징 1️⃣ submit이지만 비동기로 처리할 수 있음 2️⃣ 동작 이전의 함수처리, 이후의 함수처리도 정의할 수 있음 주의점 submit기능 동작 정의 후 return false;를 해줘야 함 이 부분을 처리하지 않으면 아무리 success, error옵션을 처리하여도 페이지가 submit이 먹히기 때문에 페이지 리로드 현상이 발생하고 결과값에 따른 동작(alert() 메시지 출력)을 정상적으로 처리 할 수 없음 사용 예시 form.html title: Content: form.js 참고 자료 👉 http://www.joshi.co.kr/index.php?mid=board_nCHS89&document_sr..
[jQuery] 제이쿼리 엔터키 이벤트
2022. 8. 25. 20:21
프로그래밍/jQuery
jQuery 엔터키 이벤트 예시 👇 $("#selectBox").on("keyup",function(key){ if(key.keyCode==13) { alert("엔터키 이벤트"); } });
jQuery 선택자에 변수 넣기
2021. 11. 3. 20:33
프로그래밍/jQuery
선택자에 변수 넣는 방법 1 . index로 선택하기 var id = 'example'; $('[index='+ id + ']'); 2. id로 선택하기 var id = 'example'; $('#'+ id ); 3 . class로 선택하기 var id = 'example'; $('.'+ id );
08.03(display)
2020. 8. 3. 20:42
프로그래밍/jQuery
show | hide fadeIn | fadeOut | fadeTo animate css animation효과생성. callback함수
07.31(dom-element)
2020. 7. 31. 20:40
프로그래밍/jQuery
문서객체 제어 네이버로 이동 요소삽입1 : 추가할 요소 기준 $(B).appendTo($(A)) : B를 A의 자식요소로 마지막에 추가 $(B).prependTo($(A)) : B를 A의 자식요소로 처음에 추가 $(B).insertAfter($(A)) : B를 A의 형제요소로 뒤에 추가 $(B).insertBefore($(A)) : B를 A의 형제요소로 앞에 추가 A A A A 요소삽입2 : 기존 요소 기준 $(A).append($(B)) : B를 A의 자식요소로 마지막에 추가 $(A).prepend($(B)) : B를 A의 자식요소로 처음에 추가 $(A).After($(B)) : B를 A의 형제요소로 뒤에 추가 $(A).Before($(B)) : B를 A의 형제요소로 앞에 추가 A A A A 요소 삭제..
07.30(each, is)
2020. 7. 30. 20:33
프로그래밍/jQuery
each 자바스크립트의 for ..in문과 비슷 배열, 객체의 요소를 순차적으로 접근 $.each(object, 콜백함수) ->배열이면 요소 하나씩, 객체면 키 벨류 : 배열/객체 $(배열).each(콜백함수) : 객체 사용불가 객체 : Object.keys(객체).forEach(callbackFunction) $(function() { let arr = ["홍길동","신사임당","이순신"]; $.each(arr, function(index, elem) { console.log(index + " : " + elem); }); //배열을 jquery객체로 변환 후 사용할 것 $(arr).each((i, e) => { console.log(i + " : " + e); }); let obj = { name :..