html - HTML で設計されたテーブル (.tmpl ファイル) に Ajax を非同期的に適用し、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;
#====================================================

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とその機能を適用するのを手伝ってください。ありがとうございました

score 0 · Accepted Answer

行を更新するには、クライアント側のJavaScriptを使用する必要があります。

まず、ajaxリクエストとDOM操作を簡素化する関数を提供するjQueryを見てみましょう。
多くの場合、ajaxルートに個別のCGIファイルを使用し、共有perlモジュールにデータアクセスコードを保持する方が簡単です。これにより、ビジネスロジックと2つのビューが明確に分離されます。

html - HTML で設計されたテーブル (.tmpl ファイル) に Ajax を非同期的に適用し、Perl を介してデータを取得する (.cgi ファイル)

1 に答える 1

Related

Reference