새로 고치지 않고 페이지의 데이터 업데이트
상태를 업데이트해야 하는 웹 사이트가 있습니다.비행기처럼 출발, 크루즈 또는 착륙을 합니다.뷰어에게 페이지 전체를 새로고침하지 않고 상태를 새로고침 할 수 있도록 하고 싶다.AJAX와 jQuery로 하는 방법이 있다는 것은 알고 있습니다만, 어떻게 동작하는지는 잘 모르겠습니다.나도 그들이 가지길 바라지 않고 버튼을 클릭해.그게 어떻게 될지 아는 사람이 있다면 정말 고맙겠다!
이것은 보통 AJAX라고 불리는 기술을 사용하여 달성됩니다.이 기술은 (백그라운드에서) 비동기식으로 데이터를 로드하므로 페이지를 다시 로드할 필요 없이 콘텐츠를 업데이트할 수 있습니다.
AJAX를 구현하는 가장 쉬운 방법은 jQuery 메서드를 사용하는 것입니다.이 방법을 사용하면 웹 서버에서 비동기식으로 데이터를 로드하고 반환된 HTML을 선택한 요소에 배치할 수 있습니다.이 메서드의 기본 구문은 다음과 같습니다.$(selector).load(url, data, complete);여기서 인수는 다음과 같습니다.
selectorurl을 한 .data(「」)와complete가 완료되면 .
필수 URL 매개 변수는 로드할 파일의 URL을 지정합니다.선택적 데이터 매개 변수를 사용하면 요청과 함께 웹 서버로 전송되는 데이터(예: 키/값 쌍)를 지정할 수 있습니다.옵션의 complete 파라미터를 사용하여 콜백함수를 참조할 수 있습니다.선택한 요소별로 콜백이 1회 실행됩니다.
시각화:
「」를하는 예.load()버튼을 누르면 데이터가 동적으로 로드됩니다.
데모
// no need to specify document ready
$(function(){
// optional: don't cache ajax to force the content to be fresh
$.ajaxSetup ({
cache: false
});
// specify loading spinner
var spinner = "<img src='http://i.imgur.com/pKopwXp.gif' alt='loading...' />";
// specify the server/url you want to load data from
var url = "http://fiddle.jshell.net/dvb0wpLs/show/";
// on click, load the data dynamically into the #result div
$("#loadbasic").click(function(){
$("#result").html(spinner).load(url);
});
});
jQuery 라이브러리를 사용하지 않으려면 일반 Javascript를 사용할 수도 있습니다.그런 식으로 콘텐츠를 로드하는 것은 조금 더 어렵습니다.다음은 javascript만으로 실행하는 방법의 예입니다.
AJAX에 대한 자세한 내용은 https://www.w3schools.com/xml/ajax_intro.asp를 참조하십시오.
라이브 피드 콘텐츠를 표시한다고 가정합니다(라이브 피드라고 합니다).txt)를 사용하여 페이지를 새로 고치지 않고 웹 페이지를 표시합니다.다음은 간단한 예를 제시하겠습니다.
아래 html 파일에서 라이브 데이터는 ID "liveData"의 div 요소에서 업데이트됩니다.
index.displaces를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>Live Update</title>
<meta charset="UTF-8">
<script type="text/javascript" src="autoUpdate.js"></script>
</head>
<div id="liveData">
<p>Loading Data...</p>
</div>
</body>
</html>
다음 autoUpdate.js는 XMLHttpRequest 개체를 사용하여 라이브 데이터를 읽고 1초마다 html div 요소를 업데이트합니다.나는 더 나은 이해를 위해 코드의 대부분에 대해 코멘트를 주었다.
자동 갱신js
window.addEventListener('load', function()
{
var xhr = null;
getXmlHttpRequestObject = function()
{
if(!xhr)
{
// Create a new XMLHttpRequest object
xhr = new XMLHttpRequest();
}
return xhr;
};
updateLiveData = function()
{
var now = new Date();
// Date string is appended as a query with live data
// for not to use the cached version
var url = 'livefeed.txt?' + now.getTime();
xhr = getXmlHttpRequestObject();
xhr.onreadystatechange = evenHandler;
// asynchronous requests
xhr.open("GET", url, true);
// Send the request over the network
xhr.send(null);
};
updateLiveData();
function evenHandler()
{
// Check response is ready or not
if(xhr.readyState == 4 && xhr.status == 200)
{
dataDiv = document.getElementById('liveData');
// Set current data text
dataDiv.innerHTML = xhr.responseText;
// Update the live data every 1 sec
setTimeout(updateLiveData(), 1000);
}
}
});
테스트용:그냥 라이브피드에 뭔가를 적어봐txt - 새로고침 없이 index.html에서도 동일하게 갱신됩니다.
라이브 피드txt
Hello
World
blah..
blah..
주의: 위의 코드는 클라이언트의 html 파일(예: file://C:/index.html)이 아닌 웹 서버(예: http://localhost:1234/index.html)에서 실행해야 합니다.
jQuery Ajax에 대한 자세한 내용은 공식 jQuery 사이트에서 보실 수 있습니다.
클릭 이벤트를 사용하지 않으려면 주기적으로 업데이트하도록 타이머를 설정할 수 있습니다.
아래 코드는 단순한 예시로 도움이 될 수 있습니다.
function update() {
$.get("response.php", function(data) {
$("#some_div").html(data);
window.setTimeout(update, 10000);
});
}
위 함수는 10초마다 호출하여 응답으로부터 콘텐츠를 가져옵니다.php 및 업데이트.
ajax의 구조를 알고 싶다면 jQuery를 직접 사용하는 것은 좋지 않습니다.서버에 Ajax 요청을 보내는 네이티브 방법을 배울 수 있습니다.XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://some.com");
xhr.onreadystatechange = function () {}; // do something here...
xhr.send();
언급URL : https://stackoverflow.com/questions/22577457/update-data-on-a-page-without-refreshing
'programing' 카테고리의 다른 글
| 서로 다른 메이븐 모듈의 구성 요소 스캔/JSpring Boot 어플리케이션의 AR (0) | 2023.03.25 |
|---|---|
| SQL Server 2016에서 json 어레이 길이를 가져옵니다. (0) | 2023.03.25 |
| AngularJS - 지시사항을 지정하는 요소를 동적으로 작성합니다. (0) | 2023.03.25 |
| JSON Postgres 데이터 유형 열에서 특정 문자열을 검색하려면 어떻게 해야 합니까? (0) | 2023.03.25 |
| React.js에서의 사운드 재생 (0) | 2023.03.25 |