Segarkan Bagian Halaman (div)


93

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.

Jawaban:


119

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.


6
Halo teman, baru saja mengetahui bahwa Anda kehilangan spasi setelah '(titik dua kan?), Contoh ini tidak berfungsi di luar kotak :-) $ (' # thisdiv '). Load (document.URL +' # thisdiv ');
David Reinberger

16
Metode ini memiliki kerugian besar. Jika Anda menggunakan ini dan bagian dari halaman dimuat ulang, Anda tidak dapat melakukan tindakan JQuery / Ajax yang sama lagi tanpa memuat ulang seluruh halaman di browser. Setelah reload dengan metode ini JQuery tidak diinitalisasi / tidak akan berfungsi lagi.
Marcel Wasilewski

2
apakah Anda yakin kami membutuhkan spasi sebelum # tag? Saya bekerja untuk saya jika saya menghapus #tag.
Kurkula

2
@GregHilston di sini adalah kode js saya $ ('# dashboard_main_content'). Load (document.URL + '#dashboard_content'); dan ini HTML saya <div class = "col-lg-12" id = "dashboard_main_content"> <div id = "dashboard_content"> Konten </div> </div>
Touhami

2
$('#thisdiv').load(document.URL + ' #thisdiv>*')mencegah yang lain #thisdivdi dalam aslinya#thisdiv
Peter

17

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.


Contoh Ajax Anda, bagaimana Anda membuatnya diperbarui secara langsung?
TheCrazyProfessor

10

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/


Contoh keren dan membuatnya mudah. Bisakah kita menemukan kerugian dengan ini?
Luigi Lopez

3

Gunakan fetchdan innerHTMLuntuk memuat konten div


1

$.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 .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.