Question

在Perl CGI脚本中，我需要在<script>元素内增加一个Perl数组索引，以在每个HTML中的数组中添加每个值

<p id="para1">
<p id="para2">
<p id="para3">
...
<p id="paraN">

一个接一个。

<p>标记的数量和Perl数组变量的长度相同。

我尝试使用JavaScript来增加Perl数组索引变量，但它无效。

有没有其他方法可以做到这一点？

示例代码：

#!/usr/bin/perl

print "content-type:text/html\n\n";

my @jslabel = ('1', '2', '3');

print <<EOF;
<html>
  <head>
  </head>
  <body>
    <p id="para0"> hi </p>
    <p id="para1"> hi </p>
    <p id="para2"> hi </p>
  </body>
  <script>
    for( var i = 0; i < 3; i++ )
    {
      document.getElementById("para"+i).innerHTML = $jslabel[i];
    }
  </script>
</html>
EOF

网页应如下所示：

1
2
3

但是，给定代码的结果：

1
1
1

如何达到预期效果？

Answer 1

您可以通过JSON编码perl数据来解决问题，然后使用javascript从中读取数据。

#! /usr/bin/perl

use strict;
use warnings 'all';

use CGI;
use JSON;

# note that JSON expects array references
my $jslabel = [ 1, 2, 3 ];

# if we're using CGI, we may as well use it's functions
my $cgi = CGI->new();
print $cgi->header('text/html');

# convert our array to JSON
my $data = to_json($jslabel);

my $html = qq:
<html>
    <head>
        <title>A title is always nice</title>

        <!-- javascript is best served inside the <header> -->
        <script>
             <!-- we're inserting the data here because of use of qq// -->
             var jslabel = $data
             for(var i=0;i<3;i++) {
                 document.getElementById("para"+i).innerHTML = jslabel[i];
             }
        </script> 
    </head>
    <body>
        <p id="para0"></p>
        <p id="para1"></p>
        <p id="para2"></p>
    </body>
</html>:;

print $html;

但是我还要指出，html文档可以更好地通过“模板文件”提供，并通过提供该功能的模块插入数据。来自CPAN的提供该功能的模块的良好示例是HTML::Template或Template::Toolkit。然而，这超出了问题的范围。

另一种方法是使用某种形式的AJAX机制从单独的CGI脚本中获取结果“实时”数据，并从返回的结果中填充（这更像是“Web 2.0”接近事物的方式）。

Answer 2

javasCript理解perl数组并使用它们的方式似乎有一些有趣的行为，我会用javasCript代码编写数组

我会在javasCript中声明数组，并在javaScript中使用它。

<script>
    var jslabel = ['1','2','3'];
    var i;
    for (i = 0; i < 3; i+=1) {
        document.getElementById("para" + i).innerHTML = jslabel[i];
    }
</script>

CGI：如何在JavaScript

2 个答案: