jquery.js 未在 Perl 模板工具包生成的文件中正确引用

Question

我有一个非常简单的小 JavaScript/Perl CGI 示例，我用它开始了一个更大的项目。当我运行它作为 client.html 和 server.pl 时，它完美地工作。但是，当我将 client.html 更改为 client.tmpl，并使用 Template Toolkit 从同一个 server.pl 脚本调用它时，它似乎无法找到 jQuery 函数。

我什至创建了一个 master.tmpl 文件，并在其中使用了 [% INCLUDE client.html %]，但它失败了。浏览器控制台验证 jquery.js 的路径是正确的，但是当它在模板中时它就像加载失败一样。

以下是 HTML 文件，我实际上是在尝试将其转换为 .tmpl 文件（格式搞砸了，第一次来，抱歉）：

client.html

<!DOCTYPE html>
<html>
    <head>
        <title>AJAX Example</title>
        <meta charset="UTF-8" />
        <script src="http://domainname/ajax_example/jquery.js"></script>

        <script type="text/javascript">
        function myTimer() {
            var typingTimer;
            var doneTypingInterval = 2000;

            $("#user_text").keyup( function() {

               clearTimeout(typingTimer);

               if ( $('#user_text' ).val()) {
                   typingTimer = setTimeout(updateText, doneTypingInterval);
               }
            });

            function updateText() {

                var current_text = document.getElementById('user_text').value;
                var http = new XMLHttpRequest();

                http.onreadystatechange = function() {

                    if ( http.readyState == 4 && http.status == 200 ) {
                        var response = http.responseText;
                        document.getElementById('server_response').value = response;
                    }
                };

                http.open("GET", "http://domainname/ajax_example/cgi-bin/server.pl?user_text=" + current_text , true );

                http.send();
            }
        }

        </script>
    </head>

    <body>
        <div>Input Text: <input type="text" id="user_text" name="user_text"  onkeyup="myTimer()"/></div><br/>
        <div>Server Resp.: <textarea id="server_response"  name="server_response"> </textarea></div>
        <br/>
    </body>
</html>

有效的server.pl：

server.pl

$cgi = CGI->new;
$id = $cgi->param('user_text');
$result = uc($id);
print $cgi->header();
print $result;

不行的server.pl：

server.pl

$cgi = CGI->new;
$id = $cgi->param('user_text');
**returned from result calculation sub** $result = uc($id);

my $config = {
    EVAL_PERL    => 1,
    POST_CHOMP   => 1,
    INTERPOLATE => 1,
    INCLUDE_PATH => '/usr/lib/cgi-bin/ajax_example/:/var/www/html/ajax_example/',  
};

    print $cgi->header( -charset=>'utf-8' );
    my $tt = Template->new($config);
    $tt->process('client.tmpl', $result);
}

请记住，我正在尽力总结代码，但 Perl 和 JavaScript 工作得很好，除非它是通过 TT 使用的。错误是：

#user_text.keyup is not a function:
("#user_text").keyup(function(){

如果我输入错误的 jquery.js 路径，我会得到同样的错误。毫无疑问，这条路很好。

感谢您提供任何建议。

Answer 1

直接的问题是您启用了 INTERPOLATE 选项，该选项在模板中的任何位置插入 Perl 变量。这使得模块尝试用它的值替换 $(，并破坏 JavaScript 语法

无论如何，这是一种草率的模板使用方式：您应该在 $vars 散列中传递您需要的所有值，然后使用 [% variable %] 模板指令从那里提取它们。这同样适用于 EVAL_PERL 选项，因为任何复杂的数据操作通常都应该在调用 process 的代码中进行。您需要在模板中执行的所有操作都可以作为模板指令使用

谈到 $vars 哈希，您应该得到 Not a HASH reference 错误，因为您传递给 process 的是对字符串变量 $result 的引用，而不是包含该值的哈希。目前还不清楚您希望如何处理该值，但是 HTML 中唯一提到的 id 是 <input> 元素底部的 id 属性 HTML，所以我在它们中放置了一个指令来向您展示它是如何工作的

看看这段代码

CGI程序

use strict;
use warnings 'all';

use CGI;
use Template;

my $cgi    = CGI->new;
my $id     = $cgi->param('user_text') // 'abc123';
my $result = uc $id;

print $cgi->header( -charset => 'utf-8' );

my $tt = Template->new( {
    # INCLUDE_PATH => '/usr/lib/cgi-bin/ajax_example/:/var/www/html/ajax_example/', 
    POST_CHOMP   => 1,
} );

$tt->process('client.html', { result => $result } );

我已经像这样修改了您的 HTML 文件。我不知道你想用 CGI 代码从 user_text 参数中提取的值做什么，所以我把它放在第一个输入字段的 value 属性中

模板文件

<!DOCTYPE html>
<html>

    <head>

        <title>AJAX Example</title>
        <meta charset="UTF-8" />

        <script src="http://domainname/ajax_example/jquery.js" />

        <script type="text/javascript">

            function myTimer() {

                var typingTimer;
                var doneTypingInterval = 2000;

                $("#user_text").keyup( function() {

                   clearTimeout(typingTimer);

                   if ( $('#user_text' ).val() ) {
                       typingTimer = setTimeout(updateText, doneTypingInterval);
                   }
                } );

                function updateText() {

                    var current_text = document.getElementById('user_text').value;
                    var http = new XMLHttpRequest();

                    http.onreadystatechange = function() {

                        if ( http.readyState == 4 && http.status == 200 ) {
                            var response = http.responseText;
                            document.getElementById('server_response').value = response;
                        }
                    };

                    http.open("GET",
                        "http://domainname/ajax_example/cgi-bin/server.pl?user_text=" + current_text,
                        true );

                    http.send();
                }
            }

        </script>

    </head>

    <body>

        <div>Input Text:
            <input type="text" id="user_text" name="user_text" value="[% result %]" onkeyup="myTimer()"/>
        </div>
        <br/>

        <div>Server Resp.:
            <textarea id="server_response"  name="server_response"/>
        </div>
        <br/>

    </body>

</html>

这是 CGI 代码的结果输出。如您所见，$("#user_text").keyup 调用保持不变，并且来自 CGI 代码的值——在 $vars 散列中传递的 result 元素——已被替换到 value文本属性 input 元素

我希望这能帮助您取得进步并让您的应用程序正常工作

产出

Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<html>

    <head>

        <title>AJAX Example</title>
        <meta charset="UTF-8" />

        <script src="http://domainname/ajax_example/jquery.js" />

        <script type="text/javascript">

            function myTimer() {

                var typingTimer;
                var doneTypingInterval = 2000;

                $("#user_text").keyup( function() {

                   clearTimeout(typingTimer);

                   if ( $('#user_text' ).val() ) {
                       typingTimer = setTimeout(updateText, doneTypingInterval);
                   }
                } );

                function updateText() {

                    var current_text = document.getElementById('user_text').value;
                    var http = new XMLHttpRequest();

                    http.onreadystatechange = function() {

                        if ( http.readyState == 4 && http.status == 200 ) {
                            var response = http.responseText;
                            document.getElementById('server_response').value = response;
                        }
                    };

                    http.open("GET",
                        "http://domainname/ajax_example/cgi-bin/server.pl?user_text=" + current_text,
                        true );

                    http.send();
                }
            }

        </script>

    </head>

    <body>

        <div>Input Text:
            <input type="text" id="user_text" name="user_text" value="ABC123" onkeyup="myTimer()"/>
        </div>
        <br/>

        <div>Server Resp.:
            <textarea id="server_response"  name="server_response"/>
        </div>
        <br/>

    </body>

</html>

jquery.js 未在 Perl 模板工具包生成的文件中正确引用

jquery.js not referencing properly within Perl Template Toolkit-generated files

javascript

ajax

perl

jquery

template-toolkit

client.html

server.pl

server.pl

CGI程序

模板文件

产出