ajax list 예제

다음은 Ajax로드 콘텐츠 가 웹 브라우저 컨트롤 및 북마킹 기능을 위반하는 문제에 대한 해결 방법을 제공합니다. 솔루션에는 URL의 #value 확인하는 설정된 간격으로 함수를 실행한 다음 올바른 콘텐츠를 표시하는 작업이 포함됩니다. 콘텐츠를 북마크하는 기능이 복원됩니다. 이 문서의 2부에서는 이 방법에 대한 작업 예제와 추가 설명이 표시됩니다. 첫 번째 양식에서 이 함수는 URL 매개 변수와 옵션에 지정된 옵션을 사용하여 Ajax 요청을 수행합니다. 두 번째 양식에서는 URL이 옵션 매개 변수에 지정되거나 현재 페이지에 대한 요청이 있는 경우 생략할 수 있습니다. 다음은 외부 데이터로 작업하여 콘텐츠를 드롭다운 메뉴로 로드하는 기본 예제입니다. 예제에서는 텍스트 파일을 사용하지만 사용자 고유의 목적에 기술을 적용할 때 고유한 데이터 원본을 사용할 수 있습니다. jQuery는 일반적으로 Ajax 요청에서 다시 얻을 것으로 예상되는 데이터 유형에 대한 몇 가지 명령이 필요합니다. 경우에 따라 데이터 형식은 메서드 이름으로 지정되며 다른 경우에는 구성 개체의 일부로 제공됩니다. 몇 가지 옵션이 있습니다: 사용XMLHttpRequest-Ajax-JSON.html에서, 우리는 jQuery의 $.each 방법을 사용하여 JSON 응답을 처리합니다. 먼저 #Contents

html을 “`로 설정하여 버튼의 후속 클릭이 기존 콘텐츠를 `지우기`하도록 합니다. 그런 다음 4개의 요소 JSON 배열을 반복하고 각 요소에 대해 인사와 이름으로 #Contents

단락을 보겠습니다.

이 단계별 자습서는 ajax 요청 및 DOM의 조작을 처리 하기 위해 jQuery를 사용 하 여 웹 페이지에 데이터를 로드 하는 방법을 보여 합니다./ #ajax_listOfOptions{ 위치:절대; /*이 하나를 변경 하지 마십시오 */ 너비:175px; /* 상자의 너비 */ 높이 : 250px; /* 상자의 높이 */ 오버플로: 자동; /* 스크롤 기능 */ 테두리 : 1px 솔리드 #317082; /* 어두운 녹색 테두리 */ 배경 색 :#FFF; /* 흰색 배경 색 */ 텍스트 정렬:왼쪽; 글꼴 크기 : 0.9em; z-인덱스:100; } #ajax_listOfOptions div{ /* .optionDiv선택 */ 여백:1px; 패딩:1px; 커서:포인터; 글꼴 크기:0.9em; } #ajax_listOfOptions .optionDiv{ /* div 목록의 각 항목에 대해 div */ } #ajax_listOfOptions .optionDiv선택{{. /* 목록에서 선택한 항목 */ 배경 색:#317082; 색상:#FFF; } #ajax_listOfOptions_iframe{ 배경 색:#F00; 위치:절대; z-인덱스:5; } 이 예제는 이전에 검토한 jQuery/Demos/UsingXMLHttpRequest-Ajax.html 유사합니다. 이번에는 ajax 메서드 대신 jQuery의 편의 get 메서드를 사용합니다. 다시 jQuery의 준비 메서드를 사용하여 단추에 수신기를 추가합니다. 클릭하면 호출합니다. jQuery는 빠르고 작으며 기능이 풍부한 JavaScript 라이브러리입니다. HTML 문서 통과 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 것들을 다양한 브라우저에서 작동하는 사용하기 쉬운 API로 훨씬 간단하게 만듭니다. 다양성과 확장성의 조합으로 jQuery는 수백만 명의 사람들이 자바 스크립트를 작성하는 방식을 변화시켰습니다. jQuery는 HTML 페이지를 조작할 수 있는 강력하면서도 사용하기 쉬운 도구 세트를 제공하여 핵심 JavaScript로 수행할 수 있는 작업을 확장합니다.

특히 jQuery의 Ajax 메서드를 사용하면 코드 줄을 적게 작성하고 유지 관리하지만 복잡한 기능을 쉽게 만들 수 있습니다.

Uncategorized