Jquery 代码段未在 JSP 中执行

Question

我在eclipse 中有一个动态web 项目。我有一个 JSP 和一个 html 文件。在我的 JSP 文件中，我包含一个 html 文件，该文件在脚本标记内包含 jquery 片段。

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
        $("#in_school").change(function() {
            var in_school = $(this).val();
            $(".in_school_input").hide("fast", function() {
                $("#in_school_" + in_school).show("slow");
            });
        });
        </script>
</head>
<body>
    <form>
        <div>
            Are you in school? <select id="in_school">
                <option selected="selected">Please choose</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </div>
        <div id="in_school_yes" class="in_school_input" style="display: none;">
            What grade are you in? <input type="text" name="grade" />
        </div>
        <div id="in_school_no" class="in_school_input" style="display: none;">
            What year did you graduate? <input type="text" name="graduation_year" />
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>

</body>
</html>

我的 JSP 页面是：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World - JSP tutorial</title>
</head>
<body>
<%@include  file="htmldata.html" %>
</body>
</html>

当我运行这个程序时，我只看到表格，但是当我选择下拉列表时，没有任何反应。它不会根据下拉值提示我其他问题。简而言之，我看到 jquery 部分从未执行过。

预期输出为 Expected_Demo。

谁能告诉我哪里出错了？谢谢！

Answer 1

在使用它的 <script> 之前的 html 中包含 jquery：

这是 cdn 的 link：

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

您可以选择 download 它并从您自己的应用程序路径中包含

此外，您需要等到 html 加载：

    <script type="text/javascript">
     $(document).ready(function(){
        $("#in_school").change(function() {
            var in_school = $(this).val();
            $(".in_school_input").hide("fast", function() {
                $("#in_school_" + in_school).show("slow");
            });
        });
      });
    </script>

Answer 2

您的 jsp 代码没有任何问题。 1- 您没有在 html.

中包含 jQuery 脚本

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

2- 您已将 javascript 放在 html 之前。这是完整的代码：

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <form>
        <div>
            Are you in school? <select id="in_school">
                <option selected="selected">Please choose</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </div>
        <div id="in_school_yes" class="in_school_input" style="display: none;">
            What grade are you in? <input type="text" name="grade" />
        </div>
        <div id="in_school_no" class="in_school_input" style="display: none;">
            What year did you graduate? <input type="text" name="graduation_year" />
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>
    <script type="text/javascript">
        $("#in_school").change(function() {
            var in_school = $(this).val();
            $(".in_school_input").hide("fast", function() {
                $("#in_school_" + in_school).show("slow");
            });
        });
    </script>

</body>
</html>

Jquery 代码段未在 JSP 中执行

Jquery snippet does not executes in JSP

html

javascript

jquery

jsp

dynamic-forms