在cgi.pm中包含内部javascript_Javascript_Jquery_Css_Perl_Cgi.pm

在cgi.pm中包含内部javascript

javascript jquery css perl

在cgi.pm中包含内部javascript,javascript,jquery,css,perl,cgi.pm,Javascript,Jquery,Css,Perl,Cgi.pm,我想在cgi.pm文件中添加jquery datepicker，并想为datepicker内联添加脚本jquery标记，因为它在外部javascript文件中不起作用。如何添加此项。。我必须使用cgi.pm，因为我被告知在我的工作场所这样做，而不是出于选择 ivalid.js和sthome.css中的代码工作得非常好这是我想在cgi文件内部添加的函数 $( function() { $( "#datepick" ).datepicker({ minDate: 0, maxDate:

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

如果我正确理解了您的问题，您只需在

-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,
    ],
);

使用警告；
严格使用；
使用CGI；
my$q=CGI->新建；
my$JAVASCRIPT='Baseline Automation Input'，
-style=>[{'src'=>'/sthome.css'}，]，
-脚本=>[
{-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>


基线自动化输入
//
在jquery
和jqueryui
之后设置ivalid.js
：
$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'},
    ]
), 

我还通过将jquery内联到文件中使jquery工作——因此没有理由不能将jquery也放在外部文件中。我想你的外部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

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

但是，事实上，我的浏览器将无法加载具有该路径的js文件：
未能加载资源：服务器以404状态响应
（未找到）
正确的相对路径不包括htdocs
目录：
../js/datepicker_installer.js

通过该路径，我可以将您的js放入外部文件datepicker\u 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()

);

下面是该脚本生成的输出：
/usr/local/apache2/cgi-bin$ perl perl4.pl


内容类型：text/html；字符集=ISO-8859-1
基线自动化输入
以下是一段预订日期：

请注意，在输出中，CGI.pm不接受-script
散列的任意属性。因此，您不能通过包含完整性和交叉源属性来遵循最佳实践。
请澄清您的问题是什么？有错误吗？@KoshVery。。错误是：未捕获引用错误：$未在inputvalidation中定义。js:17在代码中看不到inputvalidation.js
。它被包括在哪里？@Sanjay，在解决你问题的答案的左边，有一个复选标记。如果你点击它，它会做三件事：1）它会告诉其他人你的问题得到了满意的回答，这样他们就不必费心阅读问题了。2） 它会将分数奖励给回答您问题的人。3） 它还会向您奖励点数。my$q=CGI->new（）；我的$JAVASCRIPT=start_html（-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=>'JAVASCRIPT'，试过这个……没有work@Sanjay这真的很难理解，但是的，它看起来像我的意思。我只是编辑了我的示例，省去了一些元素，使它变得更短。它在编译后显示，正如你所说的。如果我在普通html文件中这样执行，那么日期选择器将显示。但是在cgi.pm格式中，它不会显示它的工作ks now…我丢失了id标签，实际上我的$q->textfield（）中缺少了一个逗号
元素导致日期选择器无法安装，因为
的属性都出错了——最重要的是id属性。我总是忘记$perl cgi.pl
，它将显示cgi程序的输出。您对输出的回答使我的内存变慢，这允许我修复html。我的问题n:你到底是怎么在-script
数组中想出这种语法的？根据CGI.pm文档，语法应该是{-code=>$JSCRIPT}。当然，输出结果表明你的语法也可以用。这没有任何区别
/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>