-1

我想在 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'}
              ]
),
4

3 回答 3

2

如果我正确理解了您的问题，您需要做的就是在-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>
于 2018-02-11T18:49:58.680 回答
1

在andivalid.js之后设置：jqueryjquery-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'},
    ]
),
于 2018-02-11T18:59:38.537 回答
1

我还通过将 jquery inline 放入文件中来让您的 jquery 工作——因此没有理由也不能将 jquery 放入外部文件中。我认为您必须有一个path problem外部 js 文件。

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

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

我可以用这个 url 请求 perl4.pl：

http://localhost:8080/cgi-bin/perl4.pl

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

我可以像这样请求htdocs目录中的页面：

http://localhost:8080/page.html

请注意我不必htdocs在 url 中指定目录。乍一看，从cgi-bin目录到htdocs/js目录的相对路径如下所示：

../htdocs/js/datepicker_installer.js

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

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

正确的相对路径不包括htdocs目录：

../js/datepicker_installer.js

使用该路径，我可以将您的 js 放入外部文件datepicker_installer.js中，perl cgi 如下所示：

#!/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()

);

datepicker_installer.js：

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

这是该脚本产生的输出：

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

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>

请注意，在输出中 CGI.pm 不接受-script散列的任意属性。因此，您不能通过包含完整性和跨域属性来遵循最佳实践。

于 2018-02-11T20:28:48.607 回答