0

私はかなり単純なことをする必要があります:

リクエストを取得してからデータベースに接続し、そこから情報を取得して HTML テーブルとして表示するサーブレットがあります (これまでのところ、これはすべて完全に機能しています)。これは、サーブレットのコマンドです。

RequestDispatcher requestDispatcher = req.getRequestDispatcher("index.jsp");
requestDispatcher.forward(req, resp);

index.jsp は、データを表示するための HTML と JavaScript を記述した場所です。

今、私が必要としているのは、ページ全体をリロードしないように、AJAX を介して約 30 秒ごとにそのデータを更新することです。また、この操作全体に jquery を使用する必要があります。

これを行う最も簡単な方法は何ですか? 私はサイトの周りのいくつかの例を見てきましたが、それらを機能させることができなかったので、私は自分の質問を投稿しています. 派手である必要はありません。テーブルを表示し、30秒ごとにデータを更新したいだけです（その間に誰かがデータベースに新しいデータを入れた場合に備えて）...

皆さん、ありがとうございました！:)

編集：

コード全体は次のとおりです。

public class IndexServlet extends HttpServlet {

    MoodService moodService;

    public IndexServlet() {
        moodService = new MoodService();
    }

    /**
     * Accepts the request and sends it to the dispatcher which takes the database data and presents it as HTML
     */
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Mood> moodList = moodService.findLastMoods(25); //my way of getting data from database

        req.setAttribute("moodList", moodList);

        RequestDispatcher requestDispatcher =req.getRequestDispatcher("index.jsp");
        requestDispatcher.forward(req, resp);

    }

}

そして index.jsp:

<html>

<head>
    <title>Previous 25 entries:</title>
    <style type="text/css">
        #container {width:1200px; margin-left:auto; margin-right: auto;}
        #tableheader {width:900px; text-align: center;}
     .field {text-align:center; width:300px;}
    </style>




</head>


<body style="background-color: black;">
<div id="container">

    <table border="1" bordercolor="#FFCC00"  width="900" height="80" cellpadding="3" cellspacing="3" style="border-top-left-radius: 15px; border-top-right-radius: 15px; text-align: center; margin-left:auto; margin-right: auto; background-color:#FFFFCC; font-size: 33px; font-family: Monotype Corsiva ">

        <tr>
            <td style="border-top-left-radius: 10px; border-top-right-radius: 10px;">PREVIOUS 25 ENTRIES:</td>
        </tr>

    </table>

    <%
        List<Mood> moodList = (List<Mood>) request.getAttribute("moodList");
        for (Mood mood : moodList) {

            Integer a = mood.getMoodId();
            String moodId = new String();

            switch (a) {

                case 1:
                    moodId = "Happy";
                    break;

                case 2:
                    moodId = "Sad";
                    break;

                case 3:
                    moodId = "Lonely";
                    break;

                case 4:
                    moodId = "Angry";
                    break;

                case 5:
                    moodId = "In Love";
                    break;

                case 6:
                    moodId = "Content";
                    break;
            } %>

    <table id="table" border="1" bordercolor="#FFCC00"  width="900" cellpadding="3" cellspacing="3" style="text-align: center; margin-left:auto; margin-right: auto; background-color:#FFFFCC;">

        <tr>
            <td class="field"> <%=mood.getUserId()%></td>
            <td  class="field"> <%=moodId%></td>
            <%Date date = new Date(mood.getTime());
                SimpleDateFormat sdf = new SimpleDateFormat("dd:MM:yyyy hh:mm:ss");
                String sDate = sdf.format(date);
            %>
            <td  class="field"> <%=sDate%></td>

        </tr>

    </table>
    <%
        }
    %>



</div>
</body>

</html>

ここで、このテーブル パーツ全体を 30 秒ごとに (データベースに追加された可能性のある新しいデータと共に) 再読み込みし、ブラウザーで読み取り可能な html として表示する必要があります。

4

2 に答える 2

2

jquery ajaxコードをjavascript関数の1つに追加します

drawDataTable();

次に、その間隔を設定します

setInterval(drawDataTable, 30000); //30 sec


私のポイントをより明確に説明する正確なコードを投稿して再度更新してください。
それでも理解できない場合は、最初にコードを投稿してください。

<script type="text/javascript">

function drawDataTable(){
 $.ajax({
      url : "NameServlet",
      dataType : 'json',
      error : function(){
      alert("Error Occured");
      },
      success : function(data) {
      //here you will get your data from servlet
      //set data to your table  
      }     
    });
}

setInterval(drawDataTable, 30000);

<script>
于 2012-10-18T10:02:04.017 に答える
0

30 秒ごとにリクエストを行いたいので、AJAX を使用するアプローチは完璧です。

同じサーブレットに 30 秒ごとにダミーのリクエストを送信する必要があります。サーブレットは JSON 形式で応答を返すことができます。jqueryを使ったAjax呼び出し

また、定期的にリクエストを送信するためにJquery（またはプレーンJavaScript）タイマーを使用することもできます。

したがって、それが機能する方法は次のとおりです。ブラウザは、リクエストを受信した後、30秒ごとにリクエストをサーブレットに送信します。サーブレットは適切なビジネス ロジックを実行し、応答を非同期的にクライアントに返します。

于 2012-10-18T10:14:16.380 に答える