如何使用更新的数据库内容定期刷新 JSP？

Posted 2023-02-24

【中文标题】如何使用更新的数据库内容定期刷新 JSP？

【英文标题】：How to periodically refresh JSP with updated DB contents?

【发布时间】：2015-02-06 14:34:37

【问题描述】：

我正在开发一个体育博彩网站。我有一个程序可以获取体育数据并写入/更新 mysql 数据库。该程序在我的本地 PC 上继续运行，数据库也位于该 PC 上。

为了检索数据，客户端（网络浏览器）创建一个新的“bean”对象。 bean 的构造函数是用从 DB 中查询的值填充一些 HashMap。然后，JSP 遍历 bean 的 HashMaps 并显示内容。下面是代码的样子：

            <%
                Bean m = new Bean();
            %>

            <table style="width: 100%">
                <tr>
                    <th colspan="2" align="center">NBA</th>
                </tr>
            </table>



            <% //Iterates through the NBA hashmap
                Iterator itrNba = m.getNbaM().entrySet().iterator();
                for (Map.Entry<Integer, Match> entry : m.getNbaM().entrySet()) 
                    Match value = entry.getValue();
            %>



            <div class="bs-example"> // Creates a table row for every Match object in the hashmap, and outputs its values
                <table>
                    <col >
                    <col >
                    <col >

                    <tr>
                        <td align="left"><%=value.getTeam0Name()%></td>
                        <%
                            if (value.getStatus() != 0) 
                        %>
                        <td align="center"><%=value.getTeam0Score()%></td>
                        <td align="right" rowspan="2"><%=value.getQuarter()%></td>
                        <%
                             else 
                        %>

                        <td align="center"></td>
                        <td align="right" rowspan="2"><%=value.getQuarter()%></td>
                        <%
                            
                        %>

                    </tr>
                    <tr>
                        <td align="left"><%=value.getTeam1Name()%></td>
                        <%
                            if (value.getStatus() != 0) 
                        %>
                        <td align="center"><%=value.getTeam1Score()%></td>
                        <%
                            
                        %>

                </table>
            </div>
            <br>

            <%
                
            %>

但是，我还没有找到一种简单的方法来让我的值刷新。我非常简单的临时解决方法是每 X 秒刷新一次整个页面，然后向下滚动到用户之前查看的位置。创建了一个新 bean，使其再次从 DB 中读取。然而，这是一种非常丑陋的方法。

是否有一种简单的方法来刷新值？我意识到我可能需要研究 jQuery 和 servlet 等，我愿意这样做。但是，我想远离 JSON、JS 和许多客户端脚本。我更喜欢坚持使用 JSP 或 servlet，它有一个 doPost 可以打印出 html 代码，但是我怎样才能定期进行这个循环呢？

谢谢。

【问题讨论】：

除非你使用js和ajax，否则没有办法只刷新页面的一部分。所以是的，你将有一些客户端脚本。

谢谢马克。使用 JS 和 ajax，示例实现会是什么样子？这一切都可以在客户端完成，还是我需要额外的服务器端逻辑？

我基本上会在 javascript 中编写整个“bean”对象部分吗？使用javascript访问DB并构造“bean”模型？

您需要服务器端逻辑来为需要替换的任何位提供内容。如果它们都同时更新，那么您可以让一个 ajax 请求一次发送所有新数据，然后使用一些 JS 将其分解并根据需要更新各个区域。

@Allen 您可以在您的服务器上使用 java 创建一个 web 服务，并通过 jquery ajax 客户端使用该 web 服务，然后就无需刷新页面，您可以使用 javascript 或 jquery 更新元素

【参考方案1】：

这是一个非常基本的 web 服务和 ajax 调用示例。您需要配置 web.xml 以使 web 服务正常工作。网上有教程，只需查找 jersey rest api 和 jquery.ajax 调用即可。

Java 代码：

@Path("/sports")
public class Sports 
    @GET
    @Produces(MediaType.APPLICATION_JSON) **//Notice it will automatically create the JSON for you**
    @Path("/getPlayer")
    public PlayerInfo getPlayerInfo(@QueryParam("player") String player) 
    PlayerInfo playerInfo = null;
    if(player == null)
    
        player = "";
    
    if(player.equalsIgnoreCase("Michael Jordan"))
    
        playerInfo = new PlayerInfo("Basketball", "Bulls", 50);
    
    else if(player.equalsIgnoreCase("Bo Jackson"))
    
        playerInfo = new PlayerInfo("Football/Baseball", "Raiders/Royals", 52);
    
    else
    
        playerInfo = new PlayerInfo("No Data.", "No Data.", -1);
    
    return playerInfo;
    

JQuery 代码：

function updatePlayer()

    var player = document.getElementById("athleteSelect").options[document.getElementById("athleteSelect").selectedIndex].innerHTML;
    $.ajax(type: "GET", url: ("http://localhost:8080/SportsWebService/sports/getPlayer?player=" + player), data:  get_param: 'value' , dataType: 'json', success: function (data) 
    document.getElementById("playerInfoDisplay").innerHTML = ("Sport: " + data.sport + "<br/> Team: " + data.team + "<br/> Age: " + data.age););

web.xml 中的球衣配置（您将需要球衣库 Jersey 1.18）：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
<display-name>WebServices</display-name>
<servlet>
        <servlet-name>Sports Service</servlet-name>
        <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
        <!-- Register resources and providers under my.package. -->
        <init-param>
            <param-name>com.sun.jersey.config.property.packages</param-name>
            <param-value>com.yourpackage.yourpackage</param-value>
        </init-param>

        <!-- Enable Tracing support. -->
        <init-param>
            <param-name>jersey.config.server.tracing</param-name>
            <param-value>ALL</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Sports Service</servlet-name>
    <url-pattern>/*</url-pattern>
</servlet-mapping>
</web-app>

jquery 的 HTML 脚本标签链接：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>

【讨论】：

感谢这个例子，它相当简单易懂。这包括任何 Jersey 方法，还是纯 jQuery 和 java？

代码本身就是java，jquery java导入来自javax.ws.rs。让服务器提供 web 服务是 jersey 发挥作用的地方。我将发布 web.xml 的示例。您将需要服务器（tomcat）或其他任何东西或项目本身中包含的球衣库。您还需要客户端应用程序中的 jquery 库我将展示将脚本标记链接到 jquery 库的示例，您也可以将其放入您的应用程序中，这样您就不会进行外部链接。

感谢您每次的详细解答。期待web.xml示例！

@Allen 我发布了 web.xml 和脚本标签链接。我想指出，您应该将客户端应用程序和 Web 服务应用程序托管在同一台服务器上，或者甚至将它们整合到一个应用程序中。如果您在一台服务器上托管 web 服务并在另一台服务器上使用 jquery ajax 访问，如果您不使用 jsonp 或 cors 或比您需要的更高级的东西，您将遇到跨域问题。

@Allen 请注意，此配置适用于 Jersey 1.18，因此如果您希望它与此代码一起使用，则应使用该版本。如果您获得较新或较旧的版本，配置可能会有所不同，但您只需要在线进行一些研究如何配置它...