it-swarm.dev

تحديث جزء من الصفحة (div)

لدي ملف HTML أساسي مرفق ببرنامج Java. يقوم برنامج Java هذا بتحديث محتويات جزء من ملف HTML كلما تم تحديث الصفحة. أريد تحديث هذا الجزء من الصفحة فقط بعد كل فاصل زمني. يمكنني وضع الجزء الذي أود تحديثه في div ، لكنني لست متأكدًا من كيفية تحديث محتويات div فقط. سيكون موضع تقدير أي مساعدة. شكرا لكم.

79
user760220

استخدام اياكس لهذا الغرض.

أنشئ وظيفة من شأنها أن تجلب الصفحة الحالية عبر ajax ، ولكن ليس الصفحة بالكامل ، فقط div في السؤال من الخادم. سيتم بعد ذلك وضع البيانات (مرة أخرى عبر jQuery) داخل نفس div المعنية واستبدال المحتوى القديم بمحتوى جديد.

وظيفة ذات الصلة:

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

مثلا.

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

لاحظ أن التحميل يستبدل المحتوى تلقائيًا. تأكد من تضمين مسافة قبل محدد الهوية.

103
user1721135

لنفترض أن لديك 2 div داخل ملف html.

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

لا يمكن لبرنامج Java نفسه تحديث محتوى ملف html لأن html مرتبط بالعميل ، وفي الوقت نفسه ترتبط Java بالجهة الخلفية.

ومع ذلك ، يمكنك التواصل بين الخادم (النهاية الخلفية) والعميل.

ما نتحدث عنه هو AJAX ، الذي تحققه باستخدام جافا سكريبت ، أوصي باستخدام jQuery وهي مكتبة JavaScript شائعة.

لنفترض أنك تريد تحديث الصفحة كل فاصل زمني ثابت ، ثم يمكنك استخدام وظيفة الفاصل الزمني لتكرار نفس الإجراء كل مرة x.

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

يمكنك أيضًا القيام بذلك مثل هذا:

setTimeout(foo, 30000);

حيث فو هي وظيفة.

بدلاً من التنبيه ("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 Receiving و JSON سيعود من هذا النوع لذلك لن أقدم لك مثالًا على ذلك ولكن آمل أن تكون هذه بداية جيدة.

17
Jonast92

تحتاج إلى القيام بذلك من جانب العميل على سبيل المثال باستخدام jQuery.

لنفترض أنك تريد استرداد HTML إلى div بمعرف 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/

10
jsalonen

وظائف $.ajax(), $.get(), $.post(), $.load() من مسج داخليا إرسال XML HTTP طلب. من بين هذه ، load() مخصص فقط DOM Element معين. انظر jQuery Ajax Doc . تفاصيل Q.A. على هذه هي هنا .

1
Mr. Mak

js pure: استخدم innerHTML لتغيير محتوى div

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

async function refresh() {
  btn.style.visibility= "hidden";
  dynamicPart.innerHTML="Loading..."
  dynamicPart.innerHTML=await(await fetch(url)).text();
  setTimeout(refresh,4000);
}
<div id="staticPart">Here is static part of page
  <button id="btn" onclick="refresh()">Start refreshing (4s)</button>
</div>

<div id="dynamicPart">Dynamic part</div>
0
Kamil Kiełczewski