html - 如何在 Perl CGI 文件中正确呈现 HTML 表

标签 html perl cgi

所以我使用 Perl CGI 从我的 Perl 代码中的数组创建一个表。我还在我的 perl 文件中实现了 HTML。我在浏览器上打印了内容，但它打印在网页的 HTML 部分之上。我希望它更低，这样它将显示在 .pl 文件的实际 HTML 部分中。为了更好地理解，我将发布它如何在浏览器上加载的屏幕截图。

enter image description here

这是我的 Perl 代码，它打印出这些数据..

 #!/usr/bin/perl -w

    use CGI qw/:standard/;
    use strict;
    use warnings;
    use JSON qw( decode_json );
    use LWP::Simple 'get'; 
    use Data::Dumper; 

    print "content-type:text/html; charset=utf-8\n\n";

    my @sessionArr;
    my @classArr;
    my @timeArr;
    my @adminArr;
    my @profArr;
    my @descArr;

    my $i = 0;

    my $myURL = "leaving URL out";

    my $json = get($myURL);
    die "Could not get $myURL!" unless defined $json;

    my $decoded_json = decode_json ($json);

    my @sessionID = @{ $decoded_json->{'items'} };
    foreach my $d ( @sessionID ) {
     $sessionArr[$i] = $d->{"sessionID"};
     $i = $i + 1;
    }

    $i = 0;

    my @class = @{ $decoded_json->{'items'} };
    foreach my $d ( @class ) {
     $classArr[$i] = $d->{"classField"};
     $i = $i + 1;
    }

    $i = 0;


    my @time = @{ $decoded_json->{'items'} };
    foreach my $d ( @time ) {
      $timeArr[$i] = $d->{"startTimeField"};
      $i = $i + 1;
    }

    $i = 0;

    my @usrcreater = @{ $decoded_json->{'items'} };
    foreach my $d ( @usrcreater ) {
      $adminArr[$i] = $d->{"leader"};
      $i = $i + 1;
    }

    $i = 0;

    my @professor = @{ $decoded_json->{'items'} };
    foreach my $d ( @professor ) {
      $profArr[$i] = $d->{"professorField"};
      $i = $i + 1;
    }

    $i = 0;




    my @description = @{ $decoded_json->{'items'} };
    foreach my $d ( @description ) {
      $descArr[$i] = $d->{"descriptionField"};
      $i = $i + 1;
    }

    $i = 0;

    foreach my $p ( @description ) {
       $i = $i +1;
    }

    foreach my $i (0..$#sessionArr) {
        print "<tr>\n";
        print " ";
        foreach my $ra (\@sessionArr, \@classArr, \@timeArr, \@adminArr, \@profArr, \@descArr) {
            print "<td>$ra->[$i]</td>\n"
        }
        print "<h2></tr></h2>\n";
    }


    print qq(<!DOCTYPE html><head></head><body>


    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <title>AU Study Sessions</title>

        <link href="../css/bootstrap.css" rel="stylesheet">

        <link href="../css/main.css" rel="stylesheet">

        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->

        <link rel="shortcut icon" href="../images/favicon.png">
        <script src="../js/pace.js"></script>

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div class="preloader"></div>

        <! -- ******************** MASTHEAD SECTION ******************** -->    
        <main id="top" class="masthead" role="main">
            <div class="container">
                <div class="logo"> <a href="http://a3jjddh.com/"><img src="../images/aulogo2.png" alt="logo"></a>
                </div>

                <h1>View Study Sessions</h1>

    <table> 
<-- *****This is where i want my table to be displayed -->


    </table> 


    <br>
    <br>
    <a href="http://website.com"> Add a Study Session</a>

                    <!--<a href="index.html#explore" class="scrollto">
                    <p>SCROLL DOWN TO EXPLORE</p>
                    <p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
                    </a> -->
            </div><! --/container -->
        </main><! --/main -->


        <! -- ******************** FOOTER SECTION ******************** -->  
        <div class="container" id="explore">



            <div class="section-title">
                <h2>With Adelphi Study Sessions Website</h2>
                <h4>You will be able to do the following</h4>
            </div>

            <section class="row features">
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail"> 
                        <img src="../images/service_01.png" alt="analytics-icon">
                        <div class="caption">
                            <h3>View Study Groups</h3>
                            <p>See the most up to date study sessions taking place on our garden city campus.</p>
                        </div>
                    </div><! --/thumbnail -->
                </div><! --/col-sm-6-->

                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail"> 
                        <img src="../images/service_02.png" alt="analytics-icon">
                        <div class="caption">
                            <h3>Add and create new study sessions</h3>
                            <p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
                        </div>
                    </div><! --/thumbnail -->
                </div><! --/col-sm-6-->

                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail"> 
                        <img src="../images/service_03.png" alt="analytics-icon">
                        <div class="caption">
                            <h3>See description of session</h3>
                            <p>The student who creates the study session will give a short description about what the study session will cover.</p>
                        </div>
                    </div><! --/thumbnail -->
                </div><! --/col-sm-6-->

                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail"> 
                        <img src="../images/service_04.png" alt="analytics-icon">
                        <div class="caption">
                            <h3>Available on campus</h3>
                            <p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
                        </div>
                    </div><! --/thumbnail -->
                </div><! --/col-sm-6-->
            </section><! --/section -->







    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/easing.js"></script>
    <script src="../js/nicescroll.js"></script> 


    </body>);

最佳答案

您的代码似乎首先生成表格的标记( print )，然后生成网页 HTML 的其余部分。如果是这种情况，以下内容可能有用。

这是一个“网页”的 HTML，带有一个表格。当在浏览器中显示时，这将显示表格以及其他内容，无论其设置方式如何设置格式和样式。

<!DOCTYPE html>
<!-- metadata: links, styling, etc -->
<body>
<!-- ... some HTML ... -->
<table>
<tr>  <td>a</td> <td>A</td> </tr>
<tr>  <td>b</td> <td>B</td> </tr>
</table>
<!-- ... more HTML ... -->
</body>
</html>

您可以通过执行 print "<!DOCTYPE html>\n" 从 Perl 生成此文本等等，逐行。

但是，这是另一回事

<table>
<tr>  <td>a</td> <td>A</td> </tr>
<tr>  <td>b</td> <td>B</td> </tr>
</table>

<!DOCTYPE html>
<!-- metadata: head, links, styling, etc -->
<body>    
<!-- ... some HTML ... -->
<!-- ... more HTML ... -->
</body>
</html>

当浏览器抛出此错误时，任何网页样式和其他元素都不会应用于表格。浏览器只会显示数据，a A和b B ，采用清教徒的表格布局 - 然后是(预期的其余部分)网页。 (此外，在您的代码中，我没有看到打印的 <table> 标签，因此我希望浏览器显示带有 a A b B 的一行。)

这似乎发生在您的代码中。它首先打印表格，然后打印实际页面。因此它从第二个示例生成上述标记。更改您的程序，以便表的 HTML 标记(由 print 生成)位于您需要放置表的 HTML 的其余部分中。

我希望这有帮助。如需更多详细信息，或者如果这不合时宜，请显示您的 HTML 及其制作方式。

鉴于问题已使用完整代码更新，这里是一个简单的修复，只需要很小的更改。请注意，这不是对如何生成 HTML 的评论，也不是以这种方式编写 HTML 的建议。

打印表格数据后，使用以下命令生成页面的 HTML

print qq(<!DOCTYPE html><head></head><body>
    ... HTML markup goes for screenfuls ...
 </body>);

您正在使用qq运算符，这是形成双引号字符串的通用方法。它还可以使用 () 以外的分隔符，所以你可以说 qq{...}等。表的一部分位于 perlop 

Customary Generic   Meaning       Interpolates
    ''      q{}     Literal         no
    ""     qq{}     Literal         yes
    ``     qx{}     Command         yes*
           qw{}     Word list       no
...
    <<EOF           here-doc        yes*
    * unless the delimiter is ''.

请参阅完整表格和其余部分的链接。

所以你的代码实际上与

相同 
print "<!DOCTYPE html><head></head><body>

<head>
  ...
</body>";

除了在此版本中，您必须在文本中的任何位置转义双引号。另一种方法是使用here-doc。

qq运算符插入变量，并包含换行符。这意味着上面的内容确实是

print "<!DOCTYPE html><head></head><body>\n";
print "\n";
print "<head>\n";
# ...
print "</body>\n";

我希望现在事情已经清楚了。您的qq(...)只是发送一个非常长的字符串(带有换行符)，即您的 HTML 文本 - 相当于 print分别处理每一行。您需要将表生成代码插入其中。

这里有一个简单的方法来更改代码来做到这一点。这不是好的代码，但它应该可以在对您所拥有的内容进行最少更改的情况下工作。拆散你的qq一分为二。第一个qq(...);将 HTML 打印到表格中。然后打印表格(移动打印它的代码)。然后再来一个qq(...);打印其余部分。

# Print HTML up to where the table needs to be
print qq(<!DOCTYPE html><head></head><body>
         ... 
            <h1>View Study Sessions</h1>
);

# Now generate markup for the table
print "<table>\n";
foreach my $i (0..$#sessionArr) {
    # rest of table-data printing code
}
print "</table>\n";

# Now resume generating the rest of your HTML
print qq(
<br>
<br>
<a href="http://website.com"> Add a Study Session</a>
... rest of your HTML
</body>
);

请注意:这不是一个好的代码。审查、修改、扩展和维护都很困难。我仍然建议您先这样做，以便及时查看页面是如何生成的。然后寻找一种更好的方法来从 Perl 代码生成 HTML。我不使用模块，所以不能推荐任何模块，但是有很多模块。

关于html - 如何在 Perl CGI 文件中正确呈现 HTML 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37040413/

上一篇：atom-editor - Atom 中随机绿色突出显示？

下一篇：php - 自定义查询生成器 Laravel

相关文章：

javascript - 使用 Google 响应式添加将页脚高度限制为 100 像素

javascript - HTML5自定义Validity-如何绘制？

python - 让用户上传Python脚本来执行

python - 主机Gator : Sent JSON data from Server using cgi python script

java - 如何从动态服务器端 URL 加载 Java 小程序？

html - 具有灵活高度的表格单元格内的绝对定位

shell - Perl 用变量替换文件的内容

regex - 重命名命令 Debian 服务器

windows - 在 Windows 中重新加载 Mojolicous 服务器

javascript - 如何在用户打开新选项卡或网站处于非事件状态时重新启动 css 动画

©2024 IT工具网  联系我们