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

标签 javascript jquery ajax perl template-toolkit

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

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

以下是我试图将其转换为 .tmpl 文件的 HTML 文件(格式搞砸了，第一次来，抱歉):

客户端.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:

服务器.pl

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

不起作用的server.pl:

服务器.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 路径，我会得到同样的错误。毫无疑问，这条路是好的。

感谢您提供的任何建议。

最佳答案

眼前的问题是您启用了 INTERPOLATE选项，它在模板中的任何地方插入 Perl 变量。这使得模块尝试替换 $(按其值，并破坏 JavaScript 语法

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

谈论 $vars哈希，你应该得到 Not a HASH reference错误，因为您要传递给 process对字符串变量的引用 $result而不是包含该值的哈希。目前还不清楚您希望如何处理该值，但唯一提到的是 id在您的 HTML 中是 id <input> 的属性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 代码中的值—result在 $vars 中传递的元素散列——已被代入 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>

关于javascript - jquery.js 未在 Perl 模板工具包生成的文件中正确引用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39302768/

上一篇：javascript - angularjs 嵌套路由不加载布局

下一篇：javascript - 使用可折叠物时 Bootstrap 和 JQuery 的正确调用顺序

相关文章：

javascript - Highchart 图问题

javascript - 从 ViewModel 访问 $parent

javascript - 将 Ajax 部分 View 模板放在 Assets/javascripts 目录中而不是 Views 目录中，Rails

javascript - jQuery/Javascript : 2 function calls in line, 等待其他完成？

javascript - 如何使用 Vuex Store 和计算属性循环传递给组件的对象数组？

javascript - 动画div的颜色

javascript - 如何在React中使用 'this.props.params'？

javascript - 使用ajax将数组数据从浏览器中的javascript传递到spring mvc Controller

javascript - 分别淡出每个 div

javascript - 使用 Ajax 加载 Rails 部分

©2024 IT工具网  联系我们