이 블로그에서는 JavaScript에서 전체 페이지를 다시 로드하지 않고 div를 다시 로드하는 방법에 대해 설명합니다.
jQuery에서 전체 페이지를 다시 로드하지 않고 div를 다시 로드하는 방법은 무엇입니까?
“ 사업부 '는 jQuery의 'on()' 메소드와 ' 짐() ' 방법.
on() 메서드는 요소에 대한 하나 이상의 이벤트 핸들러를 연결하고 load() 메서드는 콘텐츠를 가져온 요소로 로드합니다. 이러한 메서드를 결합하여 div에 액세스하고 트리거된 이벤트에 다시 로드할 수 있습니다.
예시
다음 HTML 코드를 살펴보겠습니다.
< 몸 >
< h2 > 전체 페이지를 새로고침하지 않고 div를 새로고침하는 방법입니다. h2 >
< 사업부 ID = 'myDiv' >
< 피 > JavaScript는 함수를 포함하는 프로그래밍 언어입니다. , 변수 , 이벤트 및 개체 등 피 >
사업부 >
< 단추 > 재장전 단추 >
몸 >
위의 코드 블록에서:
- 명시된 제목을 포함합니다.
- 또한 'id' 속성을 갖는 '' 요소를 지정합니다.
- 그런 다음 '
' 태그 내에 단락을 포함하고 원하는 기능을 트리거하는 버튼을 포함합니다.
이제 JavaScript 코드로 이동하겠습니다.
< 스크립트 소스 = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
스크립트 >
< 스크립트 >
$ ( '단추' ) . 에 ( '딸깍 하는 소리' , 기능 ( ) {
$ ( '#myDiv' ) . 짐 ( '#myDiv' )
알리다 ( '리로디드' )
} ) ;이 코드 조각에서
- '를 통해 jQuery 라이브러리를 포함합니다. 소스 ' 기인하다.
- 생성된 버튼에 액세스하고 ' 에() ' 방법.
- 그러면 연결된 이벤트 '에서 알 수 있듯이 버튼 클릭 시 언급된 함수가 호출됩니다. 딸깍 하는 소리 '.
- 함수 정의에서 포함된 ' <사업부> ” 요소를 제거하고 “ 짐() ” 방법을 참조하여 ID '.
- 결과적으로 버튼 클릭 시 포함된 div가 다시 로드되고 알림 대화 상자를 통해 명시된 메시지가 표시됩니다.
산출
전체 페이지를 다시 로드하지 않고 div가 성공적으로 다시 로드되는 것을 관찰할 수 있습니다.
결론
전체 페이지를 새로고침하지 않고 div를 새로고침하려면 ' 에() ” 방법을 “ 짐() ' 방법. 이러한 메서드는 트리거된 이벤트에 액세스하고 다시 참조하여 div의 콘텐츠를 다시 로드하는 데 사용할 수 있습니다. 이 블로그에서는 전체 페이지를 다시 로드하지 않고 div를 다시 로드하는 방법을 설명했습니다.
- 그런 다음 '