Làm mới một phần của trang (div)

Tôi có một tệp html cơ bản được đính kèm với một chương trình java. Chương trình java này cập nhật nội dung của một phần tệp HTML bất cứ khi nào trang được làm mới. Tôi chỉ muốn làm mới phần đó của trang sau mỗi khoảng thời gian. Tôi có thể đặt phần tôi muốn làm mới trong a div, nhưng tôi không chắc cách chỉ làm mới nội dung của div. Bất kỳ trợ giúp sẽ được đánh giá cao. Cảm ơn bạn.

Sử dụng Ajax cho việc này.

Xây dựng một hàm sẽ tìm nạp trang hiện tại thông qua ajax, nhưng không phải toàn bộ trang, chỉ div được đề cập từ máy chủ. Sau đó, dữ liệu sẽ được đưa vào bên trong cùng một div được đề cập và thay thế nội dung cũ bằng nội dung mới.

Chức năng liên quan:

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

ví dụ

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

Lưu ý, tải tự động thay thế nội dung. Đảm bảo bao gồm một khoảng trắng trước bộ chọn id.

Giả sử rằng bạn có 2 div bên trong tệp html của mình.

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

Bản thân chương trình java không thể cập nhật nội dung của tệp html vì html có liên quan đến máy khách, trong khi java liên quan đến phần sau.

Tuy nhiên, bạn có thể giao tiếp giữa máy chủ (back-end) và máy khách.

Những gì chúng ta đang nói đến là AJAX, mà bạn đạt được bằng cách sử dụng JavaScript, tôi khuyên bạn nên sử dụng jQuery, một thư viện JavaScript phổ biến.

Giả sử bạn muốn làm mới trang mỗi khoảng thời gian không đổi, sau đó bạn có thể sử dụng hàm khoảng thời gian để lặp lại hành động tương tự mỗi x lần.

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

Bạn cũng có thể làm như thế này:

setTimeout(foo, 30000);

Whereea foo là một hàm.

Thay vì cảnh báo ("hi"), bạn có thể thực hiện yêu cầu AJAX, yêu cầu này sẽ gửi yêu cầu đến máy chủ và nhận một số thông tin (ví dụ: văn bản mới) mà bạn có thể sử dụng để tải vào div.

Một AJAX cổ điển trông như thế này:

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.
    }
});

Trong đó phần phụ trợ có thể nhận dữ liệu POST'ed và có thể trả về một đối tượng dữ liệu thông tin, ví dụ: (và rất thích hợp) JSON, có rất nhiều hướng dẫn về cách làm như vậy, GSON từ Google là thứ mà tôi được sử dụng một thời gian trước, bạn có thể xem xét nó.

Tôi không chuyên nghiệp với việc nhận Java POST và trả về JSON như vậy nên tôi sẽ không cung cấp cho bạn một ví dụ về điều đó nhưng tôi hy vọng đây là một khởi đầu tốt.

Bạn cần làm điều đó ở phía máy khách, chẳng hạn với jQuery.

Giả sử bạn muốn truy xuất HTML thành div với ID mydiv:

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

Bạn có thể cập nhật phần này của trang bằng jQuery như sau:

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

Ở phía máy chủ, bạn cần triển khai trình xử lý cho các yêu cầu đến /api/mydivvà trả về đoạn HTML bên trong mydiv.

Xem Fiddle này mà tôi đã tạo cho bạn để biết một ví dụ thú vị bằng cách sử dụng jQuery get với dữ liệu phản hồi JSON: http://jsfiddle.net/t35F9/1/

Sử dụng fetchvà innerHTMLtải nội dung div

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() {
  btn.disabled = true;
  dynamicPart.innerHTML = "Loading..."
  dynamicPart.innerHTML = await(await fetch(url)).text();
  setTimeout(refresh,2000);
}

<div id="staticPart">Here is static part of page
  <button id="btn" onclick="refresh()">Click here to start refreshing every 2s</button>
</div>

<div id="dynamicPart">Dynamic part</div>

$.ajax(), $.get(), $.post(), $.load()các chức năng của jQuery gửi XML HTTPyêu cầu nội bộ . trong số này load()chỉ dành riêng cho một cụ thể DOM Element. Xem jQuery Ajax Doc . Một QA chi tiết về những điều này ở đây .