Jquery代码段不在JSP中执行

Jquery snippet does not executes in JSP

本文关键字：执行 JSP 代码 段不 Jquery      更新时间：2023-09-26

我在eclipse中有一个动态web项目。我有一个JSP和一个html文件。在我的JSP文件中，我包含了一个html文件，该文件在script标记中有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。

有人能告诉我哪里错了吗？谢谢

您的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的<script>之前在html中包含jquery：

这是cdn:的链接

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

你可以选择下载它，并从你自己的应用程序路径

此外，您需要等待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>
相关文章：