개발자의 끄적끄적

[javascript/jquery] jquery ajax html history back example / jquery ajax html 더보기 뒤로가기시 유지방법 jquery ajax html을 이용하여 더보기를 구현하다보면 게시물을 클릭해서 상세 페이지로 갔다가 뒤로가기 버튼을 이용해서 목록으로 되돌아오면, 더보기 목록이 유지되야 하는 경우가 있습니다. 그럴때는 아래와 같이 history state 를 이용하시면 됩니다. 우선 아래와 같이 total_list 이라는 변수를 선언합니다. var total_list = ""; 아래와 같이 ajax html 함수에서 append 시키는 부분에 total_list 에 리턴받은 html 데이터를 누적하고, history.replaceState 에 total_l..

[javascript/jquery] jquery ajax html type find tag example / jquery ajax html 파일 내 특정태그만 표기하는 방법 jquery 에서 ajax 를 이용하여 서버와 통신을 할때 json 이나 html 타입으로 통신을 가장 많이 하게 됩니다. 그중에서 html 타입으로 할때는 넘겨진 페이지를 특정 영역에 그대로 표시해주는 형식으로 표현됩니다! 이번에는 넘겨진 html 데이터를 전체다 표기하기 않고 특정 태그만 뽑아서 표시되게 하는 방법을 공유해보려고 합니다! $.ajax({ url : "AJAX_URL", success : function(result) { var li_html = $("#text").html(result).find('li'); $('..

[javascript/jquery] ajax 404 error example / ajax 404 에러 체크 방법 ajax 를 사용하여 서버와 데이터를 주고받다보면 http code 를 체크하여 상황에 맞게 로직을 구성해야 하는 경우가 있습니다. 그중에서 404 에러를 처리하는 방법을 공유하고자 합니다. $.ajax({ statusCode: { 404: function() { //to do } } }); 위 내용을 보시면 아시겠지만, ststuaCode 를 사용하여 404 에러를 감지하는 내용입니다! 참고들 하세요!

[javascript/jquery] jquery ajax timeout example / jquery ajax 타임아웃 설정 방법 jquery 에서 ajax 로 서버와 통신을 하다보면 시간 초과 즉, timeout 를 설정해야 하는 경우가 있습니다. 그럴때는 아래와 같이 timeout 를 설정하시면 됩니다. $.ajax({ url: "URL", error: function(){ // ERROR }, success: function(){ // Success }, timeout: 3000 // 3 seconds }); 위에 나와있는 내용처럼 timeout 를 설정하는데 1000 이 1초라서 3000을 입력하면 3초가 되는 겁니다! 참고들 하세요!

[javascript/jquery] jquery ajax catch fail example / jquery ajax 통신 실패 이벤트 jquery 에서 ajax 를 이용하여 서버와 통신을 하는경우 타임아웃이 걸리는 경우가 있습니다. 즉, reponse 를 수신하지 못하는 경우를 잡아내야 할때는 아래와 같이 fail 을 사용하시면 됩니다. $.ajax({ ... }).fail(function() { // to do }); 위 내용 보시면 아시겠지만, .fail 을 선언하고, 그 안에 추가로 동작할 로직을 작성하시면 됩니다! 참고들 하세요!

[javascript/jquery] ajax headers 에 내용 담아 보내는 방법 jquery 에서 ajax 를 이용해 특정 url을 호출할 경우 http header 에 특정 내용을 담아서 전송을 해야만 하는 경우가 있습니다. $.ajax({ url: "URL", headers: {'name': 'value'} }); 그럴때 위 내용처럼 hearders 를 추가해주면 됩니다. json 배열과 같은 방식으로 이름과 값을 넣어주면 됩니다. 참고들 하세요!

[javascript/jquery] ajax 동작여부 확인방법 ajax 가 실행되는지, 종료되는지 혹은 실행중에 종료가 안되는지 등등 여러가지 현상을 확인하기 위해서 사용할 수 있는 방법입니다! $(function)() { $(document).ajaxStart(function () { console.log("start"); }); $(document).ajaxStop(function () { console.log("stop"); }); }) 위에 적힌 소스처럼 .ajaxStart 는 ajax 가 실행될 때 동작을 하고 .ajaxStop 는 ajax 가 종료될 때 동작을 합니다. 참고하세요!