JSP AJAX MYSQL倒计时计时器

JSP AJAX MYSQL countdown timer

本文关键字：计时器 倒计时 MYSQL AJAX JSP      更新时间：2023-09-26

我想设计一个网页，如果客户接受了2小时的订阅包，那么该网页将显示2小时，并与MySQL数据库同步倒计时。如何在jsp和servlet中做到这一点做这种倒计时的最好方法是什么。可以使用ajax吗。

这里有一种方法：

当客户申请或开始使用包时（onSomeClickAction），在MySQL上创建一个自定义会话状态控制表，并在显示内容页面之前注册正确的时间：

    INSERT INTO my_control_table (userid, package, duration..., started, ended) 
VALUES (121,'MYPACK', 120,..., NOW(), NULL);
...etc

started和ends列=DATETIME类型的表colunms。duration=整数分钟数或有时间限制的DATETIME。

现在您必须创建一个JSP（checkpacktime.JSP）来为Ajax调用提供服务。

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ page import="java.net.URLDecoder, java.net.URLEncoder" %>
    String userid = "";
    String packageid = "";
    if (request.getParameter("userid") != null)
        userid = URLDecoder.decode(request.getParameter("userid").trim(), "UTF-8");
    if (request.getParameter("packageid") != null)
        packageid = URLDecoder.decode(request.getParameter("packageid").trim(), "UTF-8");
    //MYSQL Query part----
    //Compare the started column with duration
    ....
    //The result
    if(resultok){
       // return a flag or the remaining timer to sync with 
       //your counter via javascript. (you can use JSON)
       ....
    }else{
       out.print("ENDED");
    }

在目标html中添加此脚本以检查时间是否已到，并重定向到会话结束的html页面。。（带有一些自定义消息给用户）

    <%
       // Here you must execute a MySQL query to check the permissions table
      //and if user can access this content (like in checkpacktime.jsp)
      //If time is up then redirect to endsession.jsp..
      ...query CODE
      if(notOK)
         response.sendRedirect("endsession.jsp"); 
    %>
    <script>
    var synccounter = 0; //if you plant to sync with server
    var timeleft = 120 * 60; //initialize the regressive counter

    // check the state every 30 seconds
    setInterval(function(){checkcounter();}, 30 *1000);
    function checkcounter(){
       var params="userid=the_user_id&packageid=your_package_id";
       $.ajax({url:"checkpacktime.jsp",
           type:"POST",
           data:params,
           success: function(result){
              if(result != null && result.trim().equals("ENDED")){
                  window.location.href='endsession.jsp';
              }else{
                  synccounter = result.trim();
              }
           }
       });
    }
    //Another setInterval to refresh the timer each second 
    setInterval(function(){refreshtimer();}, 1000);
    function refreshtimer(){
        var myclock = $("#myclock");
        ... convert to mm:ss...
        myclock.value = <converted String>;
        timeleft--;  //decrement counter
    }
    </script>

这是一个非常基本的解决方案，您必须改进一些安全问题，您可以禁用鼠标右键单击并避免任何人访问HTML代码来保护内容。。。您可以对内容进行编码。。。

您可以将它驱动到面向对象，创建一个Check.class，并使用一些返回查询结果的方法。。

但这是实现这一目标的简单方法。

发送一个开始时间，也许还有一个结束时间，然后就可以完成了。您可以在javascript中随心所欲地设置动画，也可以只使用文本。

在数据库中的时间过后，让服务器停止为该客户端提供服务。

现在它需要在不同的时区工作吗？：）

相关文章：