web-dev-qa-db-ja.com

ページの一部を更新（div）

私はJavaプログラムに添付されている基本的なHTMLファイルを持っています。このJavaプログラムは、ページが更新されるたびにHTMLファイルの一部の内容を更新します。私は各時間間隔の後にページのその部分だけを更新したいです。更新したい部分をdivに配置できますが、divの内容のみを更新する方法がわかりません。任意の助けがいただければ幸いです。ありがとうございました。

javascripthtmlrefresh
79
user760220

これにはAjaxを使用してください。

Ajaxを介して現在のページを取得するが、ページ全体ではなくサーバーから問題のdivだけを取得する関数を作成します。そのデータは（やはりjQueryを介して）問題の同じdivの中に置かれ、古いものを新しいものに置き換えます。

関連機能：

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

例えば.

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

注意、loadは自動的にコンテンツを置き換えます。 idセレクタの前には必ずスペースを入れてください。

104
user1721135

Htmlファイルの中に2 divがあるとしましょう。

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

Htmlはクライアントに関連しているのに対し、Javaはバックエンドに関連しているため、Javaプログラム自体はhtmlファイルの内容を更新できません。

ただし、サーバー（バックエンド）とクライアントの間で通信することはできます。

私たちが話しているのは、あなたがJavaScriptを使って達成するAJAXです。私は、一般的なJavaScriptライブラリであるjQueryの使用をお勧めします。

一定の間隔ごとにページを更新したいとします。次に、interval関数を使用して、同じアクションを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されたデータを受け取ることができ、情報のデータオブジェクトを返すことができる（例えば、そして非常に好ましい）JSONですが、その方法を説明したチュートリアルがたくさんありますが、GoogleのGSONは私がしているものです。しばらく前に使用して、あなたはそれを調べることができます。

私はそのようなJava [POST受信とJSON返却を専門としていないので、例を挙げようとは思いませんが、これでうまくいくことを願っています。

17
Jonast92

たとえばjQueryを使用して、クライアント側でこれを実行する必要があります。

HTMLをID mydivでdivに取り込むとしましょう。

<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に来るリクエストのハンドラーを実装し、mydivの中に入るHTMLのフラグメントを返す必要があります。

こちらを参照してください。Fiddle jQueryを使用したJSON応答データを使用した楽しい例を示します。 http://jsfiddle.net/t35F9/1/

10
jsalonen

Divの内容をロードするためにfetchとinnerHTMLを使う

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,2000);
}
<div id="staticPart">Here is static part of page
  <button id="btn" onclick="refresh()">Start refreshing (2s)</button>
</div>

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

jQueryの$.ajax(), $.get(), $.post(), $.load()関数は内部的にXML HTTPリクエストを送ります。これらの中でload()は特定のDOM Element専用です。 jQuery Ajax Doc を参照してください。詳細はこれらは ここ です。

1
Mr. Mak