【问题标题】:How to calling js code in html?如何在html中调用js代码?
【发布时间】:2017-06-24 02:38:13
【问题描述】:

我在一个文件中有htmljs。我想要两个不同的文件jshtml

这都在一个文件中(第一种情况),这段代码可以工作:

<html>
<head>
    <title>menu</title>
    <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

</head>
<body>
<div class="container">
    <h2>Registration</h2>
    <form id="commentForm" method="post" action="Servlet" name="add_data">

        <label for="username">First Name</label>
        <input type="text" name="username" id="username" />

        <button type="submit">Register</button>

    </form>
    <script type="text/javascript">
        $(function() {
            // Initialize form validation on the registration form.
            // It has the name attribute "registration"
            $("form[name='add_data']").validate({
                // Specify validation rules
                rules: {
                    username: {
                        required: true,
                        minlength: 5
                    }
                },

                messages: {
                    username: "Please enter your firstname"
                },

                submitHandler: function(form) {
                    form.submit();
                }
            });
        });
    </script>
</div>
</body>
</html>

但是当我创建第二个文件 valid.js 并移动所有 JavaScript 代码时,这是行不通的(第二种情况):

<html>
<head>
    <title>Меню</title>
    <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
    <script src="valid.js"></script>

</head>
<body>

<div class="container">
    <h2>Registration</h2>
    <form id="commentForm" method="post" action="Servlet" name="add_data">

        <label for="username">First Name</label>
        <input type="text" name="username" id="username" />

        <button type="submit">Register</button>

    </form>
</div>
</body>
</html>

而文件valid.jshtml 文件存在于同一文件夹中。这是第一个示例中&lt;script&gt; 块中的代码副本。

$(function() {
    $("form[name='add_data']").validate({
        rules: {
            username: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            username: "Please enter your firstname"
        },

        submitHandler: function(form) {
            form.submit();
        }
    });
});

HTMLJS 文件在同一目录中。可能我需要在 html 中调用我的 js 代码吗? 有我的错误吗?为什么第二种情况不起作用?如何解决这个问题?

【问题讨论】:

  • 在$(document).ready(function() {})中添加有效的js函数代码;块。
  • 任何控制台错误?
  • 在我看来它应该可以工作,如果你所说的一切都是准确的。如果您右键单击并查看源代码,然后单击您的 valid.js,它将带您到文件的文本读出。如果不是,那么您的参考是错误的。 @NagaSaiA,$(function() {}) 是 document.ready for jquery 的简写版本。
  • 我刚刚创建了 plunker,它运行良好 - plnkr.co/edit/cRUr4AeWGMoJhEv5MRJw?p=preview
  • @Nieminen 提到这似乎是参考错误

标签: javascript jquery html


【解决方案1】:

JSP 和 JS 文件代码工作正常,我创建了 plunker 以供参考 - http://plnkr.co/edit/cRUr4AeWGMoJhEv5MRJw?p=preview

截图和控制台错误的问题是JS文件在你的目录结构中的位置。

WEB-INF 下的所有文件对外不可用。把你的静态文件放在WEB-INF文件夹下,把JS文件移出WEB-INF就可以了。

将valid.js移出WEB-INF后更改引用中js路径的引用

 <script src="**valid.js**"></script>

【讨论】:

  • 不,不幸的是,它不起作用我将我的 js 文件放在根 webapp 文件夹中,IDE 重构 src="../../valid.js" 它不起作用,我尝试 copypast你是路径“valid.js”(但我不明白是什么意思**)它与你在打印屏幕中看到的结果相同。
  • 尝试添加 type="text/javascript" .....
  • 现在可以分享控制台日志吗?
  • 和我发送的屏幕上的完全一样。可能会在 ../../ 中发出问题,这意味着需要内部 WEB-INF 然后向上 = ../.. 但我无法访问 WEB-INF。需要从上面进入 webapp 文件夹,但是如何...
【解决方案2】:

它似乎也适用于第二种情况。您可以尝试将script 标签放在页面底部并使用此标签

script src="valid.js" type="text/javascript"

包含的 type 属性与第一种情况一致,您可能希望使用某种 web server 在开发环境中提供静态文件,而不是将文件拖到浏览器中。但是,它应该可以工作。

【讨论】:

    【解决方案3】:

    在正文标签末尾添加&lt;script src="valid.js"&gt;&lt;/script&gt;

    【讨论】:

    • 有问题的代码有什么问题?它也应该工作!解释为什么它不起作用?
    • 他使用的是$(function() {});,这并不重要他是在之前还是之后导入JS文件,因为JS将在DOM加载后运行。
    • 查看他的一个文件代码,其中他的 js 在表单下方,并且有两个文件在其头部标记中。因为他给出的所有信息都没有任何控制台错误,所以我给出了这个答案。它有时无法在 chrome 上运行,如果它无缘无故地出现在我身上,我遇到了同样的问题......
    • 它可以在 chrome 上运行,并且与他在哪里导入 JS 文件无关 - plnkr.co/edit/cRUr4AeWGMoJhEv5MRJw?p=preview
    • 当你添加 'ready' 但由于他没有添加它,如果它在 head 中将无法工作。
    猜你喜欢
    • 1970-01-01
    • 2016-11-17
    • 1970-01-01
    • 2015-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-01
    • 1970-01-01
    相关资源
    最近更新 更多