將Ajax異步應用於以HTML設計的表（.tmpl文件），並通過Perl檢索數據（.cgi文件）

Question

我有2個單獨的鏈接文件->（1）.cgi（用於從URL檢索數據的Perl文件），以及（2）.tmpl（已構造表的HTML模板）。 兩者都通過HTML :: Template鏈接了。

我需要異步刷新表行的內容，例如每20秒刷新一次。 同樣，我在.tmpl文件中創建了需要刷新的各種div ID。

以下是代碼：1. Perl代碼（.cgi文件，檢索表的內容）：

#!/Dwimperl/perl/bin/perl

use strict;
use warnings;
use LWP::Simple;
use HTML::Table;
use HTML::TableContentParser;
use HTML::Template;
use CGI;

print "Content-type: text/html\n\n";
my $template = HTML::Template->new(filename => 'tryin.tmpl');
my $cgi = new CGI;
use CGI::Carp qw(fatalsToBrowser);
#1======================================================
#-------------------------------------------------------
#Fetching AIRTEL HVP1
#-------------------------------------------------------
my $URL1= "http://****/server1";
my $content1 = get($URL1);
my $str12;
my $count13;
my $count14;
my $str15;
my $str16; # GHANA TIME
#2------------------------------------------------------
# FOR IP #
#-------------------------------------------------------
my $value1=0;
my $value2=0;
if ($content1 =~ m/IP/g) {$value1=pos($content1);}
if ($content1=~m/Blocked/g) {$value2=pos($content1);}
$str12=substr($content1,$value1,$value2-$value1);
$str12=~s/[^\d.-]//g;
#print($str12);
$template->param(A12=>$str12);
#3------------------------------------------------------
# FOR INCALL #
#-------------------------------------------------------
$count13=0;
while ($content1 =~ m/bgcolor='green'/g) 
{$count13=$count13+1;}
$count13=$count13-1;
#print($count13);
$template->param(A13=>$count13);
#4------------------------------------------------------
# FOR OBD #
#-------------------------------------------------------
$count14=0;
while ($content1 =~ m/bgcolor='blue'/g) 
{$count14=$count14+1;}
$count14=$count14-1;
#print($count14);
$template->param(A14=>$count14);
#5------------------------------------------------------
# FOR BUSY CIRCUIT #
#------------------------------------------------------- 
$value1=0;
$value2=0;
if ($content1 =~ m/Busy Cir./g) {$value1=pos($content1);}
if ($content1=~m/OBD/g) {$value2=pos($content1);}
$str15=substr($content1,$value1,$value2-$value1);
$str15=~s/[^\d.-]//g;
#print($str15);
$template->param(A15=>$str15);
#6------------------------------------------------------
# FOR THE DISPALY OF LOCAL TIME
#-------------------------------------------------------
$content1 = get($URL1);
$value1=0;
$value2=0;
if ($content1=~m/Current time/g) {$value1=pos($content1);}
if ($content1=~m/Circuits/g) {$value2=pos($content1);}
$str16=substr($content1,$value1,$value2-$value1);
$str16=~s/[^\d..:._.-]//g;
#print($str16);
$template->param(TIME=>$str16);
#2=====================================================
#------------------------------------------------------
#Fetching AIRTEL HVP2
#------------------------------------------------------
my $URL2= "http://****/server2";
my $content2 = get($URL2);
my $str22;
my $count23;
my $count24;
my $str25;
#2-----------------------------------------------------
# FOR IP #
#------------------------------------------------------
$value1=0;
$value2=0;
if ($content2 =~ m/IP/g) {$value1=pos($content2);}
if ($content2=~m/Blocked/g) {$value2=pos($content2);}
$str22=substr($content2,$value1,$value2-$value1);
$str22=~s/[^\d.-]//g;
#print($str22);
$template->param(A22=>$str22); 
#3-----------------------------------------------------
# FOR INCALL #
#------------------------------------------------------
$count23=0;
while ($content2 =~ m/bgcolor='green'/g) 
{$count23=$count23+1;}
$count23=$count23-1;
#print($count23);
$template->param(A23=>$count23);
#4-----------------------------------------------------
# FOR OBD #
#------------------------------------------------------
$count24=0;
while ($content2 =~ m/bgcolor='blue'/g) 
{$count24=$count24+1;}
$count24=$count24-1;
#print($count24);
$template->param(A24=>$count24);
#5----------------------------------------------------
# FOR BUSY CIRCUIT #
#-----------------------------------------------------
$value1=0;
$value2=0;
if ($content2 =~ m/Busy Cir./g) {$value1=pos($content2);}
if ($content2=~m/OBD/g) {$value2=pos($content2);}
$str25=substr($content2,$value1,$value2-$value1);
$str25=~s/[^\d.-]//g;
#print($str25);
$template->param(A25=>$str25);
#====================================================
print $template->output;
#====================================================

1. HTML代碼（由表和div ID組成的.tmpl文件）：

   HVP使用情況報告

     <font color=#00124B> <center> <font size="7" face="calibri" color=#00124B><b>Ghana <img src="/ghanaa.jpg" width="80" height="40"></b></font> <br> <font size="6" face="calibri" color = #0033CC><b><TMPL_VAR NAME=TIME></b></font> <br><br> <table border="2" cellpadding="6" cellspacing ="4" > <tr bgcolor=#00248E> <th><font face="calibri" size="7" color=#BFCFFE>Client</font></th> <th><font face="calibri" size="7" color=#BFCFFE>HVP</font></th> <th><font face="calibri" size="7" color=#BFCFFE>IP</font></th> <th><font face="calibri" size="7" color=#BFCFFE>Incall</font></th> <th><font face="calibri" size="7" color=#BFCFFE>OBD</font></th> <th><font face="calibri" size="7" color=#BFCFFE>Busy Cir.</font></th></font> </tr> <tr> <td align ="center"><font size="6" face="calibri" color=#00124B><img src="/airtel.jpg" width="100" height="56"></font></td> <td align ="center" bgcolor=#BFCFFE><font size="7" face="calibri" color=#00124B>VP1</font></td> <td ialign ="center" bgcolor=#BFCFFE><font size="7" face="calibri" color=#00124B><TMPL_VAR NAME=A12></font></td> <div id="A1"> <td align ="center" bgcolor=#BFCFFE><font size="7" face="calibri" color=#00124B><b><TMPL_VAR NAME=A13></b></font></td> <td align ="center" bgcolor=#BFCFFE><font size="7" face="calibri" color=#00124B><b><TMPL_VAR NAME=A14></b></font></td> <td align ="center" bgcolor=#BFCFFE><font size="7" face="calibri" color=#00124B><b><TMPL_VAR NAME=A15></b></font></td> </div> </tr> <tr> <td align ="center"><font size="6" face="calibri" color=#00124B><img src="/airtel.jpg" width="100" height="56"></font></td> <td align ="center" bgcolor=#809FFE><font size="7" face="calibri" color=#00124B>VP2</font></td> <td align ="center" bgcolor=#809FFE><font size="7" face="calibri" color=#00124B><tmpl_var name=A22></font></td> <div id="A2"> <td align ="center" bgcolor=#809FFE><font size="7" face="calibri" color=#00124B><b><tmpl_var name=A23></b></font></td> <td align ="center" bgcolor=#809FFE><font size="7" face="calibri" color=#00124B><b><tmpl_var name=A24></b></font></td> <td align ="center" bgcolor=#809FFE><font size="7" face="calibri" color=#00124B><b><tmpl_var name=A25></b></font></td> </div> </tr> </table> </center> </font> 

請協助我在上述文件上應用ajax及其功能。 謝謝

Answer 1

您將需要使用客戶端javascript刷新行。

• 首先看一下jQuery，它提供了簡化ajax請求和DOM操作的功能。
• 將單獨的CGI文件用於ajax路由並將數據訪問代碼保存在共享的perl模塊中通常更容易。 這將清楚地區分商務邏輯和兩種觀點