3

私は春のフレームワークで Java ee webclient を実装しました。Web サービスからデータを読み取り、レコードを表形式で表示します。このテーブルでは、チェックボックスを選択して複数のレコードを削除できます。

現在、メタリフレッシュを使用してテーブルレコードをリフレッシュしています。理由は、javascript タイマーの更新によってページが一番上に表示されるためです。ユーザーがレコードを表示するときのユーザー エクスペリエンスに影響します。

ユーザーが削除するレコードを選択して [削除] をクリックすると、javascript の確認ダイアログ ボックスがポップアップします。メタ リフレッシュを使用する際の問題は、確認ダイアログ ボックスがポップアップしたときにリフレッシュを停止できないことです。私はjqueryを試しましたが、うまくいきませんでした。

テーブルのレコードを取得するために ajax を実装することを考えています。しかし、どうすれば効率的に実装できますか。テーブル内のレコードは動的です。

さらに追加するには、複数の html テーブルがあります。例えば、

#table 1
<table><tr><td></td>....</tr></table>

#table 2
<table><tr><td></td>....</tr></table>

#table 3
<table><tr><td></td>....</tr></table>
4

2 に答える 2

3

テンプレートとして JSP を使用することをお勧めします。これは、JSP の本体に HTML コード、フォーム、テーブルなどの静的要素が含まれている一方で、タグ ライブラリを使用して動的データを挿入できることを意味します。あなたの場合、データベースレコードからのデータ。

<c:forEach items="${listOfRecords}" var="item">
    <table> 
        <tr>
            <td>    
                <c:out value="${item}"/>
            </td>   
        </tr>       
    </table>
</c:forEach>

次に、サーブレットを使用して、クライアントへの応答でこれを送信できます。AJAX 呼び出しは応答を受け取り、HTML を現在のテーブルに追加します。以下のコード スニペットでは、AJAX は /approot/myservlet にあるサーブレットへのリクエストでデータ ("recordid="+id) を送信します。サーブレットはリクエストを受信すると、リクエストからレコード ID を取得し、データベースからレコードを削除し、最後のクエリ以降に追加された新しいレコードを取得し、新しいレコードをリクエスト ディスパッチャ経由で JSP に渡します。データが生成され、応答としてブラウザに返されます。success 属性の JavaScript が起動され、msg 変数に含まれる応答が現在のテーブルに追加されます。

$.ajax({
   type: "post",
   url: "/approot/myservlet", 
   data: "recordid="+id,
   success: function(msg){ $('#table1').append(msg);
});

これは、私が想像するソリューションの簡単な概要です。Web サービス、JSP、サーブレット、タグ ライブラリ、および AJAX を使用して J2EE アプリケーションをセットアップする方法について私が書いたステップ バイ ステップ ガイドが見つかるかもしれません。

于 2013-07-28T20:20:05.713 に答える
0

ページの更新を削除し、AJAX を使用します。これが、この問題に取り組むべきだと私が想像する方法です。最後のクエリ以降に追加されたレコードをデータベースにクエリするサーブレットに対して、(タイマーを使用して) 一定の間隔で AJAX 呼び出しが行われます。返されたレコードは、JSP テンプレートとタグ ライブラリを使用して HTML にフォーマットされ、応答でクライアントに送信されます。AJAX は応答を受け取り、HTML を適切なテーブルに追加します。AJAX がサーブレットを呼び出さないようにするには、ポップアップ ボックスを表示する直前にタイマーを停止し、レコードが削除されてページが更新されたときにタイマーを再起動します。

編集: 各テーブルを (id="table1") で識別し、その HTML を正しいテーブルに追加できます。

于 2013-07-26T10:51:30.120 に答える