HTML 实现搜索指定日期内的统计数据( 获取日期下拉框所选日期—搜索按键点击响应—向目标URL发送GET请求并获取返回数据 )

一个用网页实现游戏充值统计的功能，要求如下：

一、根据指定日期区间，搜索该时间段内每日玩家的整体充值情况。

二、根据指定某个日期，搜索该天所有玩家的记录。

首先想吐槽一句，我的主要工作是用C/C++开发服务器后台，这个任务是web前端的工作。所以，开发这个功能时，我基本上是摸着石头过河，带着大学HTML网页课堂里的些许模糊印记，借助自己的C语言功底，自学JavaScript和Perl两门脚本语言。最终，花了两天半的时间完成这个任务。开发过程中踩了一些坑，工作中有点空闲时间就做一下总结。（附主要源代码）

主要流程：

Step1. 用HTML制作网页，添加3个日期下拉框和2个搜索按键。

Step2.用JavaScript脚本写几个处理函数( 日期同步、闰年判断、按键响应、返回数据处理)。

Step3.用ajax通过GET方式向目标URL发送日期数据并获取充值统计数据。

Step4.用Perl脚本写2个.pl文件用来获取HTML发过来的日期数据，解析日志文件中的充值统计数据，最后返回给HTML。

Step1~3. 编写date.html网页文件，源代码如下：(注意红色字体两个坑点)

(读者可在

Step4.用Perl脚本写两个脚本( WholeMultiDays.pl、OneDayDetail.pl)

1.WholeMultiDays.pl源代码如下：

#!/usr/bin/perl

use Time::Local;
use utf8; 
use JSON;
use Switch;
use Data::Dumper;

#获取来自date.html的GET请求
local ($buffer, @pairs, $pair, $name, $value, %FORM);  
# Read in text  
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;  
if ($ENV{'REQUEST_METHOD'} eq "GET")  
{  
    $buffer = $ENV{'QUERY_STRING'};  
}  
# Split information into name/value pairs  
@pairs = split(/&/, $buffer);  
foreach $pair (@pairs)  
{  
    # print "

$pair

";  
    ($name, $value) = split(/=/, $pair);  
    $value =~ tr/+/ /;  
    $FORM{$name} = $value;  
}  
# key 名为 "begin_date"的键  
my $begin_date = $FORM{begin_date};  
# key 名为 "end_date"的键 
my $end_date  = $FORM{end_date};  

my $all = [];
for(my $date = $end_date;$date >= $begin_date;$date--)
{
my $today_buy_times = 0;   #购买笔数
my $today_buy_money = 0;   #购买金额
my %today_buy_count;       #购买人数
my $today_buy_all_money = 0;   #购买总额
my $fileName = "log.$date";        #文件路径
if(-e $fileName)
{
open HD, $fileName or pexit("open file failed!");
while()
{
$_ =~ tr/\n//d;
my ($timeStr,$uid,$name,$money,$payType,$action) = split /\|/, $_;
if($action eq "buy_success")
{
$today_buy_all_money += $money;
$today_buy_count{$uid} = 1;  
$today_buy_times++;
}
}
}
else
{
next;
}
my $hero = {};
$hero->{"date"} = $date;
$hero->{"count"} = keys(%today_buy_count);
$hero->{"times"} = $today_buy_times;
$hero->{"money"} = $today_buy_all_money;  
push @{$all},$hero;
}

my $json_text = JSON->new->utf8->encode($all);

print $json_text;

2.OneDayDetail.pl源代码如下：

#!/usr/bin/perl

use Time::Local;
use utf8; 
use JSON;
use Switch;
use Data::Dumper;

local ($buffer, @pairs, $pair, $name, $value, %FORM);  
# Read in text  
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;  
if ($ENV{'REQUEST_METHOD'} eq "GET")  
{  
    $buffer = $ENV{'QUERY_STRING'};  
}  
# Split information into name/value pairs  
@pairs = split(/&/, $buffer);  
foreach $pair (@pairs)  
{  
    # print "

$pair

";  
    ($name, $value) = split(/=/, $pair);  
    $value =~ tr/+/ /;  
    $FORM{$name} = $value;  
}  
# key 名为 "one_date"的键  
my $date = $FORM{one_date};  

my $today = [];

my $fileName = "log.$date";
if(-e $fileName)
{
open HD, $fileName or pexit("open file failed!");
while()
{
$_ =~ tr/\n//d;
my ($timeStr,$uid,$name,$money,$payType,$action) = split /\|/, $_;
if($action eq "buy_success")
{
my $hero = {};
$hero->{"date"} = $timeStr;
$hero->{"uid"} = $uid;
$hero->{"name"} = $name;
$hero->{"money"} = $money;
push @{$today},$hero;
}
}
}

my $json_text = JSON->new->utf8->encode($today);

print $json_text;