JavaScript를 사용하여 다시 로드하지 않고 웹페이지 콘텐츠를 새로 고칩니다. 모든 문서에서 업데이트되는 하나의 html 요소를 업데이트하는 방법이 있습니까? 다시 로드하지 않고 페이지 콘텐츠를 업데이트하는 예
안녕하세요. 이번에는 JavaScript에 대해 좀 더 자세히 알아 보겠습니다. 사용자를 미치게 만들지 않기 위해 페이지를 다시 로드하지 않고 버튼을 눌러 블록의 내용을 업데이트해야 했습니다. 이 작은 메모 덕분에 이를 구현하는 방법을 완전히 기억할 수 있습니다.
업데이트할 수 있을 뿐만 아니라
우선, 블록 요소가 필요합니다. 페이지에 이를 생성하고 jQuery가 이를 인식하는 고유 식별자를 할당해 보겠습니다.
안녕하세요 세계
식별자는 다음과 같아야 한다는 점을 이해하는 것이 중요합니다. 고유한전체 페이지에서 $('#block')을 호출하면 다음과 같은 결과를 얻을 수 있습니다. 첫 번째이 ID를 가진 페이지의 요소입니다. 여러 요소의 내용을 변경해야 하는 경우 클래스를 사용해야 합니다.
안녕하세요 세계
|
안녕하세요 세계 |
안녕하세요 세계
버튼 1
버튼 2
버튼 3
블록 지우기
거짓을 반환; href에서 URL로의 전환을 취소하기 위해 호출이 필요한 후에는 페이지 상단으로 돌아가지 않고 그대로 유지됩니다.
이제 JS의 함수 자체를 살펴보겠습니다. .html() 메서드를 사용하여 블록의 내용을 변경하겠습니다. 인수 없이 사용하면 블록의 현재 내용이 반환됩니다. 예를 들어 문자열과 같은 하나의 인수를 전달하면 블록의 내용이 해당 내용으로 대체됩니다. 현실에 더 가까운 경우에는 블록을 처리하고 새 콘텐츠를 반환하는 함수가 메서드에 전달됩니다. 그러나 지금은 문자열 전달에만 국한하겠습니다.
function setNewEntry(entry) ( //#block - 식별자로 요소 찾기 //.block - 클래스 이름으로 찾기 $("#block").html(entry); )
이것이 웹페이지 코드의 모습입니다.
Node.js .html 데모
안녕하세요 세계
버튼 1
버튼 2
버튼 3
블록 지우기
function setNewEntry(entry) ( //#block - 식별자로 요소 찾기 //.block - 클래스 이름으로 찾기 $("#block").html(entry); ) the.html() 메소드에 함수를 전달하는 예
저는 버튼 클릭 기록을 축적하고 원할 때마다 삭제하는 아주 간단한 함수를 생각해냈습니다. 시연하기에 충분합니다.
function setNewEntry(entry) ( $("#block").html(getNewEntry($("#block").html(), Entry)); ) function getNewEntry(oldHTML, newHTML) ( if(newHTML == "" ) newHTML을 반환하고, 그렇지 않으면 oldHTML + newHTML을 반환합니다.
결론글쎄요, 그게 전부입니다. 보시면 복잡하지는 않지만 이 방법을 사용하면 "훌륭한 일"을 달성하고 모든 취향에 맞는 동적 웹 페이지를 만들 수 있습니다. 관심을 가져주셔서 감사합니다!
탐색 메뉴가 있는 index.html 페이지가 있고 동일한 메뉴가 있는 다른 html 페이지가 15개 있다고 가정해 보겠습니다.
html/css/js가 하나의 파일(예: index.html 파일)을 업데이트하고 모든 업데이트가 15개 문서 전체에 적용되는 경우 가능합니까?
PHP로 이 작업을 수행할 수 있다는 것을 알고 있지만 제가 실행 중인 페이지는 PHP 인덱스 파일을 사용하지 않아서 다른 방법을 찾고 있습니다.
아마도 이것을 달성하는 다른 방법이 있을까요? 아마도 각도 JS일까요? 이 작업을 수행하는 방법을 읽거나 배우도록 제안할 수 있는 제안이나 링크가 있습니까?
이 시도:
document.getElementById("sideBar").innerHTML="";
JQuery를 사용할 수 있나요? :디
예 페이지 1:
$(document).ready(function() ( $("#sideBar").load("side_content.html"); ));
예 - 이는 가능하며 모든 유형의 중요 사이트 크기에 대한 요구 사항입니다.
너무 복잡해지지 않고 이와 같은 작업을 수행하는 일반적인 방법은 다음과 같습니다. HTML 파일에는 일부 템플릿이 포함되어 있습니다. 이 템플릿은 사이트의 전반적인 모양을 제어합니다. 모든 HTML 파일에는 동일한 템플릿이 포함되어 있습니다. 특정 페이지에서 뭔가 다른 것을 원하면 해당 특정 html 파일의 템플릿을 재정의합니다.
결과적으로 다음과 같습니다.
내 콘텐츠는 여기에 있어요.
style.css 및 custom.js에서 도시 설정으로 이동할 수 있습니다. 필요에 따라 더 많은 스타일 시트와 자바스크립트 스크립트를 추가할 수 있습니다. 대부분의 사이트에는 콘텐츠보다 스타일과 자바스크립트가 더 많습니다.
이러한 기술에 대해 배우기 위해 제가 가장 좋아하는 사이트는 Mozilla 개발자 네트워크이지만 다른 훌륭한 리소스도 많이 있습니다.
탭 동기화는 localStorage와 StorageEvent를 통해 가능합니다. MDN에서 더 많은 정보를 찾을 수 있습니다.
탐색을 업데이트한 후 localStorage.setItem(someKey, someValue)을 호출하고 window.addEventListener("storage", this.handleStorageEvent)를 사용하여 다른 탭의 localStorage 변경 사항을 처리합니다. 이벤트가 발생한 탭은 localStorage 변경 사항을 전파하지 않습니다.
제 답변이 도움이 되었기를 바랍니다: 3
XML http 요청으로 이 작업을 수행할 수 있습니다... 전체 탐색 헤더, 하나의 파일에 메뉴를 정의하고 모든 페이지에 있는 하나의 div에 액세스하면 됩니다...
function includeHTML() ( var z, i, elmnt, file, xhttp; /*모든 HTML 요소의 컬렉션을 통해 루프:*/ z = document.getElementsByTagName("*"); for (i = 0; i< z.length; i++) { elmnt = z[i]; /*search for elements with a certain atrribute:*/ file = elmnt.getAttribute("include-html"); if (file) { /*make an HTTP request using the attribute value as the file name:*/ xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} if (this.status == 404) {elmnt.innerHTML = "Page not found.";} /*remove the attribute, and call this function once more:*/ elmnt.removeAttribute("include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /*exit the function:*/ return; } } }; includeHTML();
AJAX와 jQuery. 동적 콘텐츠 업데이트. 기본사항(2012년 1월 3일부터 변경됨)이 기사에서는 AJAX와 jQuery가 무엇인지 설명하고 이를 사용하는 방법의 예를 살펴보겠습니다.
AJAX는 백그라운드에서 서버와 통신하는 웹 애플리케이션을 구축하기 위한 도구입니다. 이 경우 사용자는 전체 페이지를 다시 로드하지 않고도 동적 콘텐츠 업데이트가 포함된 애플리케이션을 받습니다.
jQuery는 시각 효과 생성, 이벤트 처리, DOM 및 AJAX 지원 작업과 같은 일부 Javascript 기능을 보다 편리하게 사용할 수 있는 라이브러리인 JavaScript 프레임워크입니다.
개발자 웹사이트에서 최신 버전의 jQuery를 다운로드하고 모든 기능에 대해 자세히 알아볼 수 있습니다. http://www.jquery.com/
이 기사에서는 $.ajax() 함수라는 하나의 jQuery 라이브러리 함수만 살펴보겠습니다. 이 기능을 사용하면 페이지를 다시 로드하지 않고도 백그라운드에서 서버에 데이터를 전송하고 서버로부터 응답을 받을 수 있습니다. 데이터 수신 또는 전송 설정은 $.ajax() 함수가 호출되는 매개변수에 따라 다릅니다. 주요 내용은 아래에서 설명합니다. 매개변수에 대한 자세한 내용은 jQuery 매뉴얼을 참조하세요.
계속해서 예를 고려해 보겠습니다.
중요한!
예제가 올바르게 작동하려면 다음을 수행해야 합니다.
1. 모든 파일은 UTF-8 인코딩으로 작성되어야 합니다.
2. 스크립트는 웹 서버에서 실행되어야 하며, 브라우저에서 파일로 실행되어서는 안 됩니다.
타이머를 사용하여 1초에 한 번씩 업데이트되는 현재 시간을 표시하는 간단한 프로그램을 만들어 보겠습니다. 이 프로그램의 특징은 다른 외부 파일에서 현재 시간에 대한 정보를 얻는 것입니다.
index.html 파일의 내용.
function show() ( $.ajax(( url: "time.php", 캐시: false, 성공: function(html)( $("#content").html(html); ) )); ) $(document ).ready(function())( show(); setInterval("show()",1000); ));
코드에는 여러 가지 기능이 있습니다. 이에 대해 설명하겠습니다.
1. jQuery 라이브러리는 HTML 파일의 헤더에 포함되어 있습니다. 이 줄은 이러한 목적으로 작성되었습니다.
jquery.js 파일 자체는 예제 파일과 동일한 폴더에 있습니다.
2. 콘텐츠를 로드할 문서 본문에 컨테이너가 생성됩니다.
3. $(document).ready() 함수는 언뜻 이상하게 보이지만 jQuery가 올바르게 작동하려면 이 함수가 필요하며, 이 함수에서 프로그램이 작동하기 위한 모든 준비를 수행할 수 있습니다. 우리의 경우에는 다른 파일에서 콘텐츠를 검색하는 메커니즘을 지정하는 show() 함수를 호출하고 show() 함수가 초당 한 번씩 호출되도록 타이머를 설정합니다.
$(document).ready(function())( show(); setInterval("show()",1000); ));
4. show() 함수는 특정 개수의 매개변수를 사용하여 $.ajax() 함수를 호출하는 것으로 구성되어 있으며, 이를 통해 백그라운드에서 서버에 있는 외부 파일로부터 정보를 얻을 수 있습니다.
$.ajax(( url: "time.php", 캐시: false, 성공: function(html)( $("#content").html(html); ) ));
$.ajax() 함수에서 사용하는 매개변수를 살펴보겠습니다.
URL: "time.php" 컨텐츠를 검색하기 위해 time.php 파일에 액세스합니다. 캐시: false 쿼리 결과가 캐시되지 않습니다. 성공: function(html)( $("#content").html(html); ) 요청이 성공하면 제어가 함수로 전달됩니다. 함수는 콘텐츠를 매개변수로 받고 해당 컨테이너를 작성합니다. 컨테이너에 쓰기는 다음 줄에서 발생합니다.
$("#content").html(html);
time.php 파일의 내용.
time.php 파일의 목적은 현재 시간을 화면에 표시하는 것입니다.
예제 소스 파일 다운로드(16.6kb):
사용자의 재량에 따라 콘텐츠를 동적으로 로드하는 프로그램입니다.
index.html 파일의 내용.
어떤 페이지를 열고 싶나요?
$(document).ready(function())( $("#btn1").click(function())( $.ajax(( url: "page1.html", 캐시: false, 성공: function(html) ( $ ("#content").html(html); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", 캐시: false, 성공 : function(html)( $("#content").html(html); ) ));문서 본문에는 사용자가 원하는 콘텐츠를 선택할 수 있는 두 개의 버튼이 있는 양식이 생성되었습니다. 그리고 콘텐츠를 로드하기 위한 컨테이너입니다.
"페이지 1" 버튼의 클릭 이벤트는 $("#btn1").click() 함수에 의해 처리되고, "페이지 2" 버튼의 클릭 이벤트는 $("#btn2")에 의해 처리됩니다. 클릭() 함수.
콘텐츠 영역에 동적으로 로드되는 page1.html 및 page2.html 파일의 콘텐츠는 콘텐츠가 포함된 간단한 HTML 페이지 또는 텍스트 파일입니다.
예제 소스 파일 다운로드(18.4kb):
입력한 사용자 이름을 서버로 보내는 예를 살펴보겠습니다. 서버가 이름을 받으면 인사말을 발행하고 입력된 이름의 문자 수를 계산합니다.
index.html 파일의 내용.
당신의 이름을 입력:
$(document).ready(function())( $("#myForm").submit(function())( $.ajax(( 유형: "POST", url: "greetings.php", data: "사용자 이름 =" +$("#username").val(), 성공: function(html)( $("#content").html(html); ) ));
문서 본문에 사용자 이름을 입력하는 양식이 생성되었습니다. 그리고 동적 콘텐츠를 로드하기 위한 컨테이너입니다.
양식 자체에는 일반적인 작업 및 메서드 필드가 없습니다. $("#myForm").submit() 함수는 "제출" 버튼을 클릭하는 이벤트에 대한 핸들러 역할을 합니다. 이 기능을 살펴보겠습니다.
$("#myForm").submit(function())( $.ajax(( 유형: "POST", url: "greetings.php", 데이터: "username="+$("#username").val ( ), 성공: function(html)( $("#content").html(html); ) )) return false;
보시다시피 주요 작업은 다시 $.ajax() 함수와 관련됩니다. 이번에는 예제 1과 2에서 고려되지 않은 추가 매개변수가 나타납니다. 즉:
유형: "POST" 데이터 전송 유형. data: "username="+$("#username").val() 서버에 전달되는 매개변수입니다. 이 경우 사용자 이름 필드의 내용(사용자 이름)을 전달합니다. 일반적으로 매개변수는 GET 메소드와 동일한 방식으로 한 줄에 작성됩니다. 예를 들면 다음과 같습니다.
데이터: "사용자 이름=Vasya&나이=18&섹스=남성"
마지막에는 다음 줄이 있습니다.
거짓을 반환합니다. 이는 양식이 시작된 파일로 데이터를 전송하려고 시도하지 않고 페이지가 다시 로드되지 않도록 하기 위해 수행됩니다.
Greetings.php 파일의 내용.
인사말을 표시하고 이름의 문자 수를 계산합니다.
예제 소스 파일 다운로드(16.8kb):
결론적으로 동적 업데이트 콘텐츠를 사용하여 페이지를 만드는 것의 명백한 장점 외에도 사이트를 개발할 때 고려해야 할 여러 가지 단점이 있습니다. 즉,
1. 동적 콘텐츠 업데이트가 포함된 페이지에서 브라우저의 "뒤로" 버튼이 올바르게 작동하지 않습니다.
2. 동적 콘텐츠 업데이트가 있는 페이지는 콘텐츠에 따라 URL을 변경하지 않으므로 북마크할 수 없습니다.
3. 동적 콘텐츠 업데이트가 포함된 페이지는 검색 엔진에서 색인을 생성하지 않습니다. JavaScript 명령을 실행하지 않습니다.
위의 단점을 프로그래밍 방식으로 제거할 수 있습니다. 이 기사에서는 그러한 방법을 다루지 않습니다.
찾다
신청
