Question

我想在cgi.pm文件中添加jquery datepicker，并希望为datepicker添加脚本jquery标记内联，因为它在外部javascript文件中不起作用。怎么能添加.. 我必须使用cgi.pm，因为我被告知要在我的工作场所这样做，而不是选择......

ivalid.js和sthome.css中的代码工作正常......

这是我想在cgi文件中内部添加的功能。

$( function() {
    $( "#datepick" ).datepicker({ minDate: 0, maxDate: "+1M +10D" });
  } );

cgi.pm

$q->start_html
(
        -title=>'ai',
    -style=>[{'src'=>'/sthome.css'},
         {'src'=>'//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'},
         {'src'=>'/resources/demos/style.css'}],
     -script=>[{-language=>'javascript',
              -src=>'/ivalid.js'},
              {-language=>'javascript',
             -src=>'https://code.jquery.com/jquery-1.12.4.js'},
             {-language=>'javascript',
            -src=>'https://code.jquery.com/ui/1.12.1/jquery-ui.js'}
              ]
),

Answer 1

如果我理解你的问题，你需要做的只是在-script=>[...]数组中包含一个字符串：

use warnings;
use strict;
use CGI;

my $q = CGI->new;

my $JAVASCRIPT = <<'ENDJS';
$( function() {
    $( "#datepick" ).datepicker({ minDate: 0, maxDate: "+1M +10D" });
} );
ENDJS

print $q->start_html(
    -title=>'Baseline Automation Input',
    -style=>[ {'src'=>'/sthome.css'}, ],
    -script=>[
        {-language=>'javascript', -src=>'/ivalid.js'},
        $JAVASCRIPT,
    ],
);

输出：

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Baseline Automation Input</title>
<link rel="stylesheet" type="text/css" href="/sthome.css" />
<script src="/ivalid.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
$( function() {
    $( "#datepick" ).datepicker({ minDate: 0, maxDate: "+1M +10D" });
} );

//]]></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

Answer 2

在ivalid.js和jquery之后设置jquery-ui：

$q->start_html
(
    -title=>'Baseline Automation Input',
    -style=>[
        {'src'=>'/sthome.css'},
        {'src'=>'//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'},
        {'src'=>'/resources/demos/style.css'}
    ],
    -script=>[
        {-language=>'javascript', -src=>'https://code.jquery.com/jquery-1.12.4.js'},
        {-language=>'javascript', -src=>'https://code.jquery.com/ui/1.12.1/jquery-ui.js'}
        {-language=>'javascript', -src=>'/ivalid.js'},
    ]
),

Answer 3

我还通过将jquery内联到文件中来使你的jquery工作 - 所以没有理由不能将jquery放在外部文件中。我认为你的外部js文件必须有dig mx mydomain.com @IP_ADRESS_FROM_FILE。

我为我的服务器使用apache，这是我的目录结构：

path problem

我可以使用此网址请求perl4.pl：

apache2/
    cgi-bin/
        perl4.pl
    htdocs/
       page.html
       js/   
           datepicker_installer.js

我的apache服务器配置为侦听端口8080。

我可以在http://localhost:8080/cgi-bin/perl4.pl目录中请求页面，如下所示：

htdocs

请注意我不必在url中指定http://localhost:8080/page.html目录。乍一看，从htdocs目录到cgi-bin目录的相对路径看起来就像是：

htdocs/js

但实际上我的浏览器无法使用该路径加载js文件：

无法加载资源：服务器响应状态为404 （未找到）http://localhost:8080/htdocs/js/datepicker_installer.js

正确的相对路径不包含../htdocs/js/datepicker_installer.js目录：

htdocs

使用该路径，我可以将你的js放在外部文件../js/datepicker_installer.js中，这就是perl cgi的样子：

datepicker_installer.js

datepicker_installer.js：

#!/usr/bin/env perl

use strict;
use warnings;
use CGI qw(:all); 
use CGI::Carp qw(fatalsToBrowser);

my $q = new CGI;

my $JSCRIPT = q-

$( function() {
    $( "#datepick" ).datepicker({ 
        minDate: 0, maxDate: "+1M +10D" 
    });
} )

-;

print(

    $q->header,

$q->start_html(
    -title=>'Baseline Automation Input',
    -style=>[
        {-src=>'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'}
    ],
    -script=>[
        {-src=>'http://code.jquery.com/jquery-3.3.1.js',
         -integrity=>'sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=',
         -crossorigin=>'anonymous'
        },
        {-src=>'https://code.jquery.com/ui/1.12.1/jquery-ui.js',
         -integrity=>'sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=',
         -crossorigin=>'anonymous'
        },
        #{-code=>$JSCRIPT}  #This works too!
        {-src=>'../js/datepicker_installer.js'}  #<===HERE
    ],

),

    $q->div(
        {-id=>"divtop"},
        $q->p("Here's a paragraph")
    ),

    $q->start_form(
        -method=>'post'
    ),

    $q->div(
        "Reservation Date:",
        $q->textfield(
            -name=>'reservation',  #<==Don't forget a comma here!
            -size=>50,
            -maxlength=>80,
            -id=>'datepick'
        )
    ),

    $q->end_form(),
    $q->end_html()

);

以下是该脚本生成的输出：

$( function() {
    $( "#datepick" ).datepicker({ 
        minDate: 0, maxDate: "+1M +10D" 
    });
} );

/usr/local/apache2/cgi-bin$ perl perl4.pl

在输出中请注意，CGI.pm不接受Content-Type: text/html; charset=ISO-8859-1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> <head> <title>Baseline Automation Input</title> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script> <script src="../js/datepicker_installer.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div id="divtop"><p>Here's a paragraph</p></div><form method="post" action="http://localhost" enctype="multipart/form-data"><div>Reservation Date: <input type="text" name="reservation" size="50" maxlength="80" id="datepick" /></div></form> </body> </html>哈希的任意属性。因此，您不能通过包含完整性和crossorigin属性来遵循最佳实践。

在cgi.pm中包含内部javascript

3 个答案: