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

Question

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

Answer 1

は、このためのAjaxを使用します。

は、私はJSONレスポンスデータを取得するjQueryのを使用して楽しいたとえば、あなたのために作られたこのフィドルを参照してください。

ajaxを介して現在のページを取得する機能を構築しますが、ページ全体ではなく、サーバーから問題のdivだけを取得します。データは（再びjQuery経由で）問題の同じdivに入れられ、古いコンテンツが新しいものに置き換えられます。

関連機能：

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

例えば

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

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

Answer 2

jQueryを使ってクライアント側で行う必要があります。

のは、あなたがID mydivでのdivの中にHTMLを取得したいとしましょう：

<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のフラグメントを返す必要があります。 http://jsfiddle.net/t35F9/1/

Answer 3

あなたのhtmlファイルの中に2つのdivがあるとしましょう。 HTMLがクライアントに関連しているので

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

Javaプログラム自体は、htmlファイルの内容を更新することはできません、その間Javaはバックエンドに関連しています。

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

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

一定間隔ごとにページを更新したい場合、間隔機能を使用してx回ごとに同じ操作を繰り返すことができます。

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

また、このようにそれを行うことができます：fooが関数であるWhereea

setTimeout(foo, 30000); 

。

アラート（ "hi"）の代わりに、AJAXリクエストを実行してサーバーにリクエストを送信し、divにロードするための情報（たとえば、新しいテキスト）を受け取ることができます。

古典AJAXは、このようになります。バックエンドはPOST'edデータを受信することができ、そこに、JSON例えば、情報のデータオブジェクトを返すことができる（そして非常にpreferrable）であるWherea

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

そこから多くのチュートリアルがあります。GoogleのGSONは、私がしばらく前に使っていたものです。あなたはそれを調べることができます。

私はJava POSTを受け取ってJSONを返すのはプロフェッショナルではありませんので、例を挙げませんが、これはまともなスタートです。

Answer 4

$.ajax(), $.get(), $.post(), $.load() jQueryの内部機能は、XML HTTPリクエストを送信します。これらのうちはDOM Element専用です。 jQuery Ajax Docを参照してください。 A詳細はこちらこれらはHereです。