jquery48 jquery를 이용한 Ajax html데이터 일부분 로드 jjquery를 이용한 Ajax html일부분 로드하기 Ajax 데이터로드하기 html편에서 이미 html 전체를 로드하는 방법을 봤다. 이번에는 일부분을 로드하는 방법을 살펴보자 html데이타 파일 데이타 파일 안에 두가지로 분류해놓자 클래스명을 하나는 part 또다른 하나는part02 로 정해주었다. Part one 어쩌고 저쩌고 Part tow 이러히 저러히 메인페이지 jquery를 이용한 ajax 데이터로드 html일부분 html 일부분_01 html 일부분_02 로드된 데이터가 들어올자리 리스트에 두가지로 나누었다 하나는 아이디 one을 주었고 하나는 아이디 tow를 주었다. 이제 각각클릭시 part, part02를 부르도록 스크립트를 짜보자 jquery 스크립트 $(document).ready.. 2010. 2. 10. jquery를 이용한 Ajax 로딩중 알리기 jquery를 이용한 Ajax 로딩중 알리기 흔히 긴데이타를 로딩할때 화면에 now loㅁding이라는 것을 봤을것이다.데이타가 간단하면 구차하게 쓸필요 없지만 많고 길 경우 현재상황을 알려줄 필요가 있다. jquery를 이용해서 만들어보자 html로딩 소스 짜기 html엘리먼트로 로딩중임을 알려줄 소스를짜보자 보통 그림을 이용하지만 간단하게하기위해 css로 보여줄것이다. 원하는 모습은 아래와 갔다. now loading html과 css로 짜준다면 now loading css에서 가로 세로 80px박스 그리고 최색배경, 검은색테두리를 사용했다. div#loading{height:80px; width:80px; background:#999; border:10px #000 solid;} div#loadin.. 2010. 2. 9. jquery 이용한 Ajax 폼으로 검색하기 Ajax 데이터로드하기 폼(form) 검색편 데이타가 여러개 있다면 앞서해본것은 클릭시 로드되는데이타였다.이번에는 폼을 이용하여 그중 검색할때 원하는 결과가 나오도록 해보자 기본적인 폼 간단한 검색용 폼을 만들어보자 위와같이하면 흔히 보는 검색 박스하나와 검색버큰이 나올것이다. php데이터 다시보기 데이타는 저번과 같다 다만 검색으로 하기에 php를 조금 수정해줄필요가있다 찬찬히보자 저번에 포스팅한 데이터를 보려면 여기http://siana.tistory.com/entry/Ajax-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0.. 2010. 2. 9. Ajax 데이터로드하기 서버로 데이터 전달 php Ajax 데이터로드하기 서버로 데이터 전달 php 앞서본 포스팅한것들을 정적인 파일들이였다. html,스크립트 파일 단순한 텍스트(text)등으로 이정도는 ajax방법이 아니고도 가능하다.이번엔 동적인 데이타 전송을 살펴보자 동적 데이타파일 ajax를 이용한것은 동적데이타의 경우 브라우저에서 받은 입력값에따라 비동기적으로 되돌려주게 되어있다. 이런 동적파일은 php,java,asp가 있다.여기서 가장 편히 쓰이고 쉽게 할수있는 php로 예를들어보겠다. php 데이타요청 먼저데이타 파일을 보자 내용은 하나가아닌 여러가지로 분류되어 있다 $entries = array( 'HTML'=> array( 'definition' => 'HyperText Markup Language', 'explantion'=> '어.. 2010. 2. 8. jquery 이용한 Ajax 데이터로드하기 간단한 스크립트파일편 Ajax 데이터로드하기 스크립트편 자바스크립트를 사용하면서 과다량의 사용으로 한번에 로드가 요구되어 과부하가 걸리는수가있다.이런경우 html생성부분을 로드하는 파일에 넣어서 처리할 수 있다.JSON의 예를보면서 확인해보자 앞서 포스팅한 부분(아래참조)을 되돌려보면 데이타를 로드하는 부분 그리고 html코드를 만들어주는 부분이 같이 포함된것을 볼수있다.이 스크립트만 사용한다면 문제없지만 다른 스크립트 소스와 많이 사용하게된다면 복잡하고 문제발생우려가 크다. $(document).ready(function() { $('#part02').click(function() { $.getJSON('./ajax_part/aboutJSON.json' ,function(data) { //여기까지 데이타로드하는코드 $('#.. 2010. 2. 7. jquery 이용한 Ajax 데이터로드하기 xml편 Ajax 데이터로드하기 xml편 xml은 가장 널리알려지고 호환성좋은 데이터 형식이다.현재 웹상에서 보편적으로 통용되기에 부담없이 사용가능하다.이번엔 xml파일을 로드해보자 xml 어쩌고 저쩌고~~ 위와같은 파일을 로드해볼것이다. term이라지정된Xml을 h2 엘리멘트로 part의extensible markup language를 h3엘리먼트로 그리고 definition의 내용은 div엘리먼트로 로드해보자 이번엔먼저 만들어질 html 소스부터 생각해보자.앞서 설명한대로라면 다음과같이 나와야 할것이다. Xml extensible markup language 어쩌고 저쩌고~~ 두번 설명한 기본적인페이지 소스를다시보자 이번엔 part03로 아이디주고 list에 xml삽입이라고 텍스트를 입렸해줬다. jquery를.. 2010. 2. 6. jquery 이용한 Ajax 데이터로드하기 JSON편 Ajax 데이터로드하기 JSON편 가장간단한 html을 로드해봤다면 이번엔 JSON파일을 로드해보겠다. JSON이란? JavaScript Object Notation으로 xml데이터를 대신하기위해 사용되기도 한다.중괄호 대괄호 등을 사용하여 표현한다. 예제를 보자 [ { "listN" : "JSON ", //변수지정 기리고 값설정 "sunmmary" : "JavaScript Object Notation", "definition" : [ "JSON (JavaScript Object Notation) is a lightweight data-interchange format.", "It is easy for humans to read and write.", "It is easy for machines to p.. 2010. 2. 5. jquery 이용한 Ajax 데이터로드하기 html편 Ajax 데이터로드하기 html편 ajax는 여러기능이 있지만 그중 기본적인것이 비동기방식으로 데이터를 전송하는것이다.가장간단하게 jquery를 이용하여 html파일을 불러오는 것을 살펴보자 아래와 같은 레이아웃를 페이지로 삼고 오른쪽 검정색부분에 html 데이타를 부를것이다. 기본적인페이지 소스 jquery를 이용한 ajax 데이터로드_01 html 삽입 로드된 데이터가 들어올자리 그리고 약간꾸며줄 css소스. 간단하게 양쪽으로 float해주고 명확히 하기위해 border를 주었다.마진 패딩 초기화등은 귀찮아서 패스. body{ width:960px; text-align:center;} #wrapper{ text-align:left;} #siadebar{ float:left; border:1px #00.. 2010. 1. 30. jQuery DOM empty clone 메소드 복사하기 jQuery DOM clone 메소드 .clone()은 엘리먼트를 복사하는 메소드이다. 클론은 이벤트 또한 복제하는데 하나하나 살펴보자 아메바...... 위의 엘리먼트를 복제해보자 $('p').clone(); 자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다. $('p').clone().insertAfter('p'); 위와같이하면아래와같이 복사되어 나올것이다 아메바......아메바...... 이벤트까지 복제 이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다. 누르면 버튼이 복제되어 생겨남 위의 버튼을 누르면 복제되도록하려면 $('button').click(fun.. 2009. 11. 28. jQuery DOM empty remove 메소드 제거하기 jQuery DOM empty remove 메소드 제거하기위한 메소드로는 .empty()와 .remove()가 있다..empty()의경우는 검색된 요소안의 모든 엘리먼트를 제거하고 .remove()의 경우는 검색된 엘리먼트와 자식들을 제거한다.차례대로 보자 empty 메소드 empty메소드는 비운다는 말 그대로 모든걸 지운다.해당엘리먼트의 자식과 텍스트모두 제거한다 모두 사라 집니다. 위의 코드에 아래를 삽입하면 아무것도 나오지 않는다. $('p').empty(); //p란 엘리먼트에 접근후 //p엘리먼트의 자식과 텍스트 제거 remove 메소드 이메소드는 접근하여 검색된 엘리먼트와 자식,텍스트를 제거한다. 사라짐 안사라짐 위에서 selected란 클래스의 엘리먼트를 사라지게 할것이다. $('p').re.. 2009. 11. 25. 이전 1 2 3 4 5 다음
