본문 바로가기

JQuery6

jquery는 JSON.parse()를 사용한다. 다음의 코드는 서버로 HTTP request를 날린 후 response로 JSON데이터를 받아 alert를 찍어주는 부분이다.$.ajax({type : "GET",url : "${pageContext.request.contextPath}/json.do",dataType : "json",data : "adsId=" + adsId + "&cmd=" + cmd,success : function(json) { if (json.isSuccess) { alert(json.msg); } alert(json.info.adsName); alert(json.info.imp); alert(json.info.click);}, error : function(e) { alert("처리중 장애가 발생하였습니다."); } });서버.. 2013. 10. 18.
jquery를 이용한 jsonp 처리 방법 test.co.kr 이라는 사이트에서 dev.co.kr 이라는 사이트에 있는 정보를 Ajax 기술을 이용하여 요청을 보낼 때 cross domain policy에 의해 브라우저가 요청을 막는다.즉, 도메인이 다르면 요청을 보낼 수 없다. 위와 같은 상황을 우회하여 해결할 수 있는 방법은 jquery에서 jsonp를 이용하는 것이다.한 가지 주의해야 할점은 jsonp는 HTTP GET 방식만 지원한다. jsp 파일 $(document).ready(function() { }); function getJsonTest1() { $.getJSON("http://jsonp.localhost:8081/jsonpTest?id=user&callback=?", function(data) { alert(data.id + ".. 2013. 7. 11.
html table merge 간혹 아래와 같이 html table을 merge한 후 화면에 보여줘야 하는 경우가 있다. 전에는 for문 돌리며 if 처리를 통해 해결했는데 다음과 같이 DOM을 이용하면 코드를 이해하기 쉽고, 유지보수하기 편해진다. 다음은 샘플 코드이다. 여기서 중요한 부분은 꼭 merge할 cell은 정렬이 되어 있어야 한다는 것이다. (DB에서 query 조회 시 order by를 이용하여 정렬 처리) 정렬이 안 되어 있는 상태에서 merge를 하게 되면 다음과 같이 원하지 않는 결과를 가져올 수 있다. 이유는 코드를 확인해 보면 안다. 2012. 11. 6.
jquery radio 테스트 radio 버튼 처리를 위한 테스트 코드를 작성해 보았다. 초기 로딩 화면은 다음과 같다. 테스트 코드는 다음과 같다. mWeb inApp HTML5 this is M area mobile web this is I area inapp this is H area html5 여기서 한가지 고민되는 부분이 있었다. radio 버튼을 클릭할 때마다 text를 변경하며 노출해야 하는데 위의 테스트 코드와 같이 hide(), show()를 이용하여 처리를 하다보면 버튼 항목이 추가되었을 때 늘어난 항목 만큼 조건절에 모두 추가해 줘야 한다. 그래서 루프를 이용하여 다음과 같이 처리하였다. 조금은 코드가 깔끔해 졌다. ^^ 개발을 하다보면 시간에 쫓겨 이와 같은 고민을 하지 못하고, 그냥 지나쳐 버리곤 했는데 학습 .. 2012. 11. 6.
jquery checkbox 전체 선택, 전체 해제, 체크 값 추출 jquery를 이용하여 checkbox 핸들링 테스트를 해보았다. 체크 박스 전체 석택체크 박스 전체 해제체크 되어 있는 값 추출서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우) 1번째 checkbox2번째 checkbox3번째 checkbox4번째 checkbox 한 가지 고민스러운 것은 서버에서 받아온 데이터가 콤마가 아닌 리스트 형태일 경우 어떻게 처리하는 것이 좋을까 이다. service layer에서 리스트 형태의 checkbox 데이터를 콤마 형태로 가공한 후 view에 던져줘야 할까?아니면 리스트로 받은 데이터를 view에 던져주어 데이터 가공 작업을 위임할까? okjsp에 질문올려서 다른 분들은 어떤 방법을 사용하고 있는지 알아봐야 겠다. 2012. 11. 5.
jquery selector 실습 tree를 이용하여 화면을 개발하였는데 jquery를 잘 모르다보니 초반에 너무 삽질을 많이 했다. 지금은 웬만큼 익숙해졌지만 좀 더 간결하고 깔끔하게 짤 수 있는 방법을 찾기 위해 지속적인 테스트를 해보려고 한다. 브라우저는 크롬을 사용하였고, console.log 를 이용하여 디버깅을 하였다. 이제는 jquery selector에 대한 부담이 없어졌다. 이제 클라이언트 개발도 어느 정도 자신감이 생기기 시작했고, 두려움이 사라지고 있다. 물론 이것만 알았다고 해서 자만하지 말고, 더더욱 발전할 수 있도록 반복 숙달하자. 결과 화면 2012. 11. 2.