jQuery ajax 응답 문자열에서 반환 된 요소 선택에 대한 비밀

이 기사에서는 jQuery의 선택 엔진을 활용하여 AJAX 호출을 통해 정적 페이지에서 특정 HTML 조각을 추출하여 웹 응용 프로그램 내에서 컨텐츠를 효율적으로 재사용하는 방법을 보여줍니다. 이 기술은 서버 측 데이터 준비가 불가능한 레거시 시스템 또는 정적 컨텐츠를 처리 할 때 특히 유용합니다.

주요 개념 :

jQuery의 선택 엔진은 DOM 요소 및 메모리 마크 업 문자열과 함께 일하는 유연성을 제공합니다. Ajax를 사용하여 정적 HTML 페이지를 가져 오면 전체 페이지의 마크 업 (DocType 및 Root HTML 요소 포함)이 반환됩니다. jQuery로 이것을 선택할 수있게하려면 단일 루트 요소 (예 : a

)로 감겨 야합니다. 그런 다음 jQuery 방법은 원하는 HTML 단편의 정확한 추출을 허용합니다. 시나리오 : 다양한 범주에 걸쳐 "영화"페이지 목록 영화가있는 응용 프로그램을 상상해보십시오 (그림 1). 그러나 홈페이지는 예를 들어 액션 필름만이 영화의 하위 집합 만 표시하면됩니다 (그림 2).

<div> 구현 : <code>find() "영화"페이지 (목록 1) 논리적으로 요소 내의 영화 범주, 각각 고유 한 ID. 리스팅 1 : 영화 페이지 (movies.html)

홈페이지 (Listing 2)는 jQuery를 사용하여 ajax를 통해 를 가져옵니다. 응답은 에 래핑되고

메소드는 "액션"영화 섹션을 추출합니다. 리스팅 2 : 홈페이지 (index.html)

간단한 스타일 시트 (목록 3)는 기본 스타일을 제공합니다 리스팅 3 : 스타일 시트 (styles.css)

결론 :

이 접근법은 틈새 시장이지만 서버 측 수정없이 기존 페이지에서 콘텐츠를 선택적으로 렌더링 할 때 가치가 있습니다. 키는 단일 루트 요소로 Ajax 응답을 래핑하고 타겟팅 된 컨텐츠 추출에 jQuery 's

를 사용하는 것입니다. 자주 묻는 질문 :

(원래 FAQ 섹션은 유지되지만 명확성과 간결함을 위해 다시 표시됩니다.)

<section></section> jQuery ajax 응답 문자열 :

이들은 Ajax 요청 후 서버에서 반환 한 데이터 (종종 HTML)입니다. jQuery의 는 응답의 요청 및 처리를 처리합니다.

ajax 응답에서 요소 선택 : 사용 응답에서 jQuery 객체를 만들고 와 같은 메소드를 사용하여 해당 객체 내에서 요소를 선택하십시오.

전체 HTML 페이지 응답 : 게시물 요청에 대한 전체 HTML 페이지 응답은 일반적으로 서버 측 오류를 나타냅니다. 상태 코드 (성공을 위해 200이어야 함)와 디버깅의 응답 텍스트를 확인하십시오. $(responseString) .find() jQuery로 HTML 부분을 검색하십시오 :

메소드는 HTML 문서의 특정 섹션을로드하는 데 효율적입니다. URL의 공간 후 선택기를 사용하십시오 (예 : ).

jQuery 객체를 문자열로 변환 : 메소드는 html 요소를 나타내는 jQuery 객체를 HTML 컨텐츠를 포함하는 문자열로 변환합니다.