如何使用更新的DB内容定期刷新JSP?

时间:2014-12-08 20:37:06

标签: java mysql ajax jsp servlets

我正在体育博彩网站上工作。我有一个程序,可以获取体育数据并写入/更新MySQL数据库。该程序在我的本地PC上运行,数据库也位于此处。

为了检索数据,客户端(Web浏览器)创建一个新的“bean”对象。 bean的构造函数是使用从DB查询的值填充一些HashMaps。然后,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 width="100">
                    <col width="20">
                    <col width="100">

                    <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和servlets等,我愿意这样做。但是,我想远离JSON,JS和许多客户端脚本。我更喜欢坚持使用JSP或具有打印出html代码的doPost的servlet,但是如何定期进行此循环呢?

感谢。

1 个答案:

答案 0 :(得分:0)

这是webservice和ajax调用的一个非常基本的例子。您需要配置web.xml以使Web服务正常工作。有在线教程只需查看泽西休息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>