[javascript] 페이지 일부 새로 고침 (div)

Program / 글쓴이

Java 프로그램에 첨부 된 기본 html 파일이 있습니다. 이 Java 프로그램은 페이지가 새로 고쳐질 때마다 HTML 파일의 일부 내용을 업데이트합니다. 각 시간 간격 후에 페이지의 해당 부분 만 새로 고치고 싶습니다. 새로 고침하려는 부분을에 배치 할 수 div있지만 .NET Framework의 콘텐츠 만 새로 고치는 방법을 잘 모르겠습니다 div. 어떤 도움을 주시면 감사하겠습니다. 감사합니다.

답변

이를 위해 Ajax를 사용하십시오.

ajax를 통해 현재 페이지를 가져 오지만 전체 페이지가 아닌 서버에서 문제의 div 만 가져 오는 함수를 빌드하십시오. 그런 다음 데이터는 (다시 jQuery를 통해) 문제의 동일한 div에 넣고 이전 콘텐츠를 새 콘텐츠로 바꿉니다.

관련 기능 :

http://api.jquery.com/load/

예 :

$('#thisdiv').load(document.URL +  ' #thisdiv');

로드는 자동으로 컨텐츠를 대체합니다. ID 선택기 앞에 공백을 포함해야합니다.

답변

html 파일 안에 2 개의 div가 있다고 가정 해 보겠습니다.

<div id="div1">some text</div>
<div id="div2">some other text</div>

html은 클라이언트와 관련이 있고 자바는 백엔드와 관련되어 있기 때문에 자바 프로그램 자체는 html 파일의 내용을 업데이트 할 수 없습니다.

그러나 서버 (백엔드)와 클라이언트간에 통신 할 수 있습니다.

우리가 말하는 것은 AJAX로, JavaScript를 사용하여 달성 할 수 있습니다. 일반적인 JavaScript 라이브러리 인 jQuery를 사용하는 것이 좋습니다.

일정한 간격마다 페이지를 새로 고치고 싶다고 가정하고 간격 함수를 사용하여 x 시간마다 동일한 작업을 반복 할 수 있습니다.

setInterval(function()
{
    alert("hi");
}, 30000);

다음과 같이 할 수도 있습니다.

setTimeout(foo, 30000);

여기서 foo는 함수입니다.

alert ( “hi”) 대신 서버에 요청을 보내고 div에로드하는 데 사용할 수있는 일부 정보 (예 : 새 텍스트)를 수신하는 AJAX 요청을 수행 할 수 있습니다.

클래식 AJAX는 다음과 같습니다.

var fetch = true;
var url = 'someurl.java';
$.ajax(
{
    // Post the variable fetch to url.
    type : 'post',
    url : url,
    dataType : 'json', // expected returned data format.
    data :
    {
        'fetch' : fetch // You might want to indicate what you're requesting.
    },
    success : function(data)
    {
        // This happens AFTER the backend has returned an JSON array (or other object type)
        var res1, res2;

        for(var i = 0; i < data.length; i++)
        {
            // Parse through the JSON array which was returned.
            // A proper error handling should be added here (check if
            // everything went successful or not)

            res1 = data[i].res1;
            res2 = data[i].res2;

            // Do something with the returned data
            $('#div1').html(res1);
        }
    },
    complete : function(data)
    {
        // do something, not critical.
    }
});

백엔드가 POST 데이터를 수신 할 수 있고 정보의 데이터 객체 (예 : JSON (매우 선호))를 반환 할 수있는 반면,이를 수행하는 방법에 대한 많은 자습서가 있습니다. Google의 GSON은 제가 잠시 전에 사용했다면 살펴볼 수 있습니다.

나는 Java POST 수신 및 JSON 반환에 대해 전문적이지 않으므로 이에 대한 예제를 제공하지는 않지만 이것이 적절한 시작이되기를 바랍니다.

답변

예를 들어 jQuery를 사용하여 클라이언트 측에서 수행해야합니다.

ID를 사용하여 HTML을 div로 가져오고 싶다고 가정 해 보겠습니다 mydiv.

<h1>My page</h1>
<div id="mydiv">
    <h2>This div is updated</h2>
</div>

다음과 같이 jQuery를 사용하여 페이지의이 부분을 업데이트 할 수 있습니다.

$.get('/api/mydiv', function(data) {
  $('#mydiv').html(data);
});

서버 측에서는 들어오는 요청에 대한 핸들러를 구현 /api/mydiv하고 mydiv 내부로 들어가는 HTML 조각을 반환해야합니다.

JSON 응답 데이터와 함께 jQuery get을 사용하는 재미있는 예제는이 Fiddle을 참조하십시오. http://jsfiddle.net/t35F9/1/

답변

fetch및 innerHTML을 사용 하여 div 콘텐츠로드

코드 스 니펫 표시

답변

$.ajax(), $.get(), $.post(), $.load()jQuery의 기능은 내부적으로 XML HTTP요청을 보냅니다 . 이들 중 load()은 특정 DOM Element. jQuery Ajax Doc을 참조하십시오 . 이에 대한 자세한 QA는 여기 입니다.

답변