JSP AJAX MYSQL倒计时器

时间:2016-01-10 20:22:03

标签: javascript jquery ajax jsp servlets

我想要设计一个网页,如果客户需要2个小时的订阅包,那么网页将显示2小时,其中倒计时器与MySQL数据库同步。 如何在jsp和servlet中执行此操作 这种倒计时器的最佳方法是什么。 可以使用ajax。

2 个答案:

答案 0 :(得分:0)

发送开始时间,也许是结束时间并完成它。您可以根据需要在javascript中为其设置动画,或者仅使用文本设置动画。

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

现在需要在不同的时区工作吗? :)

答案 1 :(得分:0)

这是一种方法:

当客户申请或开始使用该软件包时(onSomeClickAction),在MySQL上创建一个自定义会话状态控件表并注册正确的时间以显示内容页面:

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

开始并结束DATETIME Type的columns = table colunms。   持续时间=整数分钟数或带时间限制的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,其中一些方法返回查询结果..

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