Sayfanın Bir Kısmını Yenile (div)

Bir java programına eklenmiş temel bir html dosyam var. Bu java programı, sayfa her yenilendiğinde HTML dosyasının bir kısmının içeriğini günceller. Her zaman aralığından sonra sayfanın yalnızca o bölümünü yenilemek istiyorum. Yenilemek istediğim bölümü a içine yerleştirebilirim div, ancak yalnızca .tw dosyasının içeriğini nasıl yenileyeceğimi bilmiyorum div. Herhangi bir yardım memnuniyetle karşılanacaktır. Teşekkür ederim.

Bunun için Ajax kullanın.

Geçerli sayfayı ajax aracılığıyla getirecek, ancak tüm sayfayı değil, yalnızca sunucudan söz konusu div'i alacak bir işlev oluşturun. Veriler daha sonra (yine jQuery aracılığıyla) söz konusu aynı div içine yerleştirilecek ve eski içeriği yenisiyle değiştirilecektir.

İlgili işlev:

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

Örneğin

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

Unutmayın, yükle otomatik olarak içeriğin yerini alır. Kimlik seçiciden önce bir boşluk eklediğinizden emin olun.

Html dosyanızın içinde 2 div'in olduğunu varsayalım.

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

Java programının kendisi html dosyasının içeriğini güncelleyemez çünkü html istemci ile ilgilidir, bu arada java arka uç ile ilgilidir.

Bununla birlikte, sunucu (arka uç) ve istemci arasında iletişim kurabilirsiniz.

Bahsettiğimiz şey, JavaScript kullanarak elde ettiğiniz AJAX, yaygın bir JavaScript kitaplığı olan jQuery'yi kullanmanızı tavsiye ederim.

Sayfayı her sabit aralıkta yenilemek istediğinizi varsayalım, ardından aynı eylemi her x seferde tekrarlamak için aralık işlevini kullanabilirsiniz.

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

Bunu şu şekilde de yapabilirsiniz:

setTimeout(foo, 30000);

Oysa foo bir işlevdir.

Uyarı ("hi") yerine, sunucuya bir istek gönderen ve div'e yüklemek için kullanabileceğiniz bazı bilgileri (örneğin yeni metin) alan AJAX isteğini gerçekleştirebilirsiniz.

Klasik bir AJAX şuna benzer:

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

Arka uç, POST'lu verileri alabilir ve örneğin (ve çok tercih edilen) JSON gibi bir bilgi veri nesnesi döndürebilirken, bunun nasıl yapılacağına dair birçok öğretici var, Google'dan GSON benim bir süre önce kullanılmışsa, bir göz atabilirsiniz.

Java POST alma ve bu tür JSON geri dönüşü konusunda profesyonel değilim, bu yüzden size bununla ilgili bir örnek vermeyeceğim, ancak umarım bu iyi bir başlangıçtır.

Bunu istemci tarafında örneğin jQuery ile yapmanız gerekir.

Diyelim ki kimliğe sahip HTML'yi div'e almak istiyorsunuz mydiv:

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

Sayfanın bu bölümünü jQuery ile aşağıdaki şekilde güncelleyebilirsiniz:

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

Sunucu tarafında /api/mydiv, mydiv'in içine giren HTML parçasına gelen istekler için işleyici uygulamanız gerekir .

JSON yanıt verileriyle jQuery get kullanarak eğlenceli bir örnek için sizin için yaptığım bu Fiddle'a bakın: http://jsfiddle.net/t35F9/1/

Kullanım fetchve innerHTMLdiv içerik yüklemek için

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'nin işlevleri dahili olarak XML HTTPistek gönderir . bunların arasında load()yalnızca belirli bir kişiye adanmıştır DOM Element. JQuery Ajax Belgesine bakın . Bunlarla ilgili bir ayrıntı QA burada .