Segarkan Bagian Halaman (div)

Saya memiliki file html dasar yang dilampirkan ke program java. Program java ini memperbarui konten bagian dari file HTML setiap kali halaman di-refresh. Saya hanya ingin menyegarkan bagian halaman itu setelah setiap interval waktu. Saya dapat menempatkan bagian yang ingin saya segarkan div, tetapi saya tidak yakin bagaimana cara menyegarkan hanya konten div. Bantuan apa pun akan dihargai. Terima kasih.

Gunakan Ajax untuk ini.

Bangun fungsi yang akan mengambil halaman saat ini melalui ajax, tetapi bukan keseluruhan halaman, hanya div yang dimaksud dari server. Data kemudian akan (lagi melalui jQuery) dimasukkan ke dalam div yang sama dan mengganti konten lama dengan yang baru.

Fungsi yang relevan:

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

misalnya

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

Catatan, memuat secara otomatis menggantikan konten. Pastikan untuk memasukkan spasi sebelum pemilih id.

Anggaplah Anda memiliki 2 div di dalam file html Anda.

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

Program java sendiri tidak dapat mengupdate konten file html karena html terkait dengan klien, sedangkan java terkait dengan back-end.

Namun, Anda dapat berkomunikasi antara server (back-end) dan klien.

Apa yang kita bicarakan adalah AJAX, yang Anda capai menggunakan JavaScript, saya sarankan menggunakan jQuery yang merupakan pustaka JavaScript umum.

Anggaplah Anda ingin menyegarkan halaman setiap interval konstan, lalu Anda dapat menggunakan fungsi interval untuk mengulangi tindakan yang sama setiap x kali.

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

Anda juga bisa melakukannya seperti ini:

setTimeout(foo, 30000);

Sedangkan foo adalah sebuah fungsi.

Alih-alih peringatan ("hi") Anda dapat melakukan permintaan AJAX, yang mengirimkan permintaan ke server dan menerima beberapa informasi (misalnya teks baru) yang dapat Anda gunakan untuk memuat ke div.

AJAX klasik terlihat seperti ini:

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

Jika backend dapat menerima data yang telah diposkan dan dapat mengembalikan objek data informasi, misalnya (dan sangat disukai) JSON, ada banyak tutorial di luar sana tentang bagaimana melakukannya, GSON dari Google adalah sesuatu yang saya digunakan beberapa waktu lalu, Anda bisa memeriksanya.

Saya tidak profesional dengan penerimaan Java POST dan pengembalian JSON semacam itu jadi saya tidak akan memberi Anda contoh dengan itu, tetapi saya harap ini adalah awal yang baik.

Anda perlu melakukannya di sisi klien misalnya dengan jQuery.

Katakanlah Anda ingin mengambil HTML menjadi div dengan ID mydiv:

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

Anda dapat memperbarui bagian halaman ini dengan jQuery sebagai berikut:

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

Di sisi server, Anda perlu mengimplementasikan penangan untuk permintaan yang datang /api/mydivdan mengembalikan fragmen HTML yang masuk ke dalam mydiv.

Lihat Fiddle yang saya buat untuk Anda untuk contoh yang menyenangkan menggunakan jQuery dapatkan dengan data respons JSON: http://jsfiddle.net/t35F9/1/

Gunakan fetchdan innerHTMLuntuk memuat konten 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()fungsi jQuery mengirim XML HTTPpermintaan secara internal . di antaranya load()hanya didedikasikan untuk tertentu DOM Element. Lihat jQuery Ajax Doc . Rincian QA tentang ini ada di Sini .