รีเฟรชส่วนของหน้า (div)

ฉันมีไฟล์ html พื้นฐานที่แนบมากับโปรแกรม java โปรแกรม java นี้อัปเดตเนื้อหาส่วนหนึ่งของไฟล์ HTML ทุกครั้งที่รีเฟรชเพจ ฉันต้องการรีเฟรชเฉพาะส่วนนั้นของหน้าหลังจากแต่ละช่วงเวลา ฉันสามารถวางส่วนที่ฉันต้องการรีเฟรชใน a divได้ แต่ฉันไม่แน่ใจว่าจะรีเฟรชเฉพาะเนื้อหาของไฟล์div. ความช่วยเหลือใด ๆ จะได้รับการชื่นชม ขอบคุณ.

ใช้ Ajax สำหรับสิ่งนี้

สร้างฟังก์ชันที่จะดึงข้อมูลหน้าปัจจุบันผ่าน ajax แต่ไม่ใช่ทั้งหน้าเพียงแค่ div ที่เป็นปัญหาจากเซิร์ฟเวอร์ จากนั้นข้อมูลจะ (อีกครั้งผ่าน jQuery) ใส่ไว้ใน div เดียวกันที่เป็นปัญหาและแทนที่เนื้อหาเก่าด้วยเนื้อหาใหม่

ฟังก์ชันที่เกี่ยวข้อง:

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

เช่น

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

หมายเหตุการโหลดจะแทนที่เนื้อหาโดยอัตโนมัติ อย่าลืมเว้นวรรคก่อนตัวเลือกรหัส

สมมติว่าคุณมี 2 div ภายในไฟล์ html ของคุณ

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

โปรแกรม java เองไม่สามารถอัปเดตเนื้อหาของไฟล์ html ได้เนื่องจาก html เกี่ยวข้องกับไคลเอนต์ในขณะที่ java เกี่ยวข้องกับส่วนหลัง

อย่างไรก็ตามคุณสามารถสื่อสารระหว่างเซิร์ฟเวอร์ (ส่วนหลัง) และไคลเอนต์ได้

สิ่งที่เรากำลังพูดถึงคือ AJAX ซึ่งคุณทำได้โดยใช้ JavaScript ฉันขอแนะนำให้ใช้ jQuery ซึ่งเป็นไลบรารี JavaScript ทั่วไป

สมมติว่าคุณต้องการรีเฟรชหน้าทุกช่วงเวลาคงที่จากนั้นคุณสามารถใช้ฟังก์ชันช่วงเวลาเพื่อทำซ้ำการกระทำเดียวกันทุกครั้ง x

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

คุณสามารถทำได้เช่นนี้:

setTimeout(foo, 30000);

Whereea foo คือฟังก์ชั่น

แทนการแจ้งเตือน ("hi") คุณสามารถดำเนินการตามคำขอ AJAX ซึ่งส่งคำขอไปยังเซิร์ฟเวอร์และรับข้อมูลบางอย่าง (เช่นข้อความใหม่) ซึ่งคุณสามารถใช้เพื่อโหลดลงใน div

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'ed และสามารถส่งคืนวัตถุข้อมูลตัวอย่างเช่น JSON (และเป็นที่ต้องการมาก) มีแบบฝึกหัดมากมายพร้อมวิธีการทำ GSON จาก Google เป็นสิ่งที่ฉัน ใช้ไปสักพักคุณลองดู

ฉันไม่ใช่มืออาชีพกับการรับ Java POST และการส่งคืน JSON ของประเภทนั้นดังนั้นฉันจะไม่ยกตัวอย่างให้คุณ แต่ฉันหวังว่านี่จะเป็นการเริ่มต้นที่ดี

คุณต้องทำเช่นนั้นในฝั่งไคลเอ็นต์เช่น jQuery

สมมติว่าคุณต้องการดึง HTML เป็น div ด้วย ID 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และส่งคืนส่วนของ HTML ที่อยู่ใน mydiv

ดู Fiddle ที่ฉันสร้างขึ้นสำหรับคุณเพื่อเป็นตัวอย่างสนุก ๆ โดยใช้ jQuery get กับข้อมูลการตอบกลับ JSON: http://jsfiddle.net/t35F9/1/

ใช้fetchและinnerHTMLโหลดเนื้อหา 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()ฟังก์ชั่นของ jQuery ส่งXML HTTPคำขอภายใน ในบรรดาสิ่งเหล่านี้load()มีไว้เพื่อเฉพาะเจาะจงDOM Elementเท่านั้น ดูjQuery Ajax หมอ รายละเอียดเกี่ยวกับการควบคุมคุณภาพเหล่านี้มีที่นี่