Spring Boot 无法识别 Javascript 文件

Question

我正在使用 spring boot，我有一个 jsp 文件，它是：

<%@ include file="common/header.jsp" %>
    <%@ include file="common/navigation.jsp" %>
        <div class="container">
            <p>page to add new employee</p>
            <div class="container">

                <form>
                    <label>iNumber</label>
                    <input name="iNumber" name="iNumber" type="text" class="form-control" required="required" />

                    <label>Joined Date</label>
                    <input name="joinedDate" id="joinedDate" type="text" class="form-control" required="required" />

                    <label>Position</label>
                    <input name="position" id="position" type="text" class="form-control" required="required" />

                    <label>Reports To</label>
                    <input name="reportsTo" id="reportsTo" type="text" class="form-control" required="required" />

                    <label>Cubicle No</label>
                    <input name="cubicleNo" id="cubicleNo" type="text" class="form-control" required="required" />

                    <label>Job type</label>
                    <input name="jobType" id="jobType" type="text" class="form-control" required="required" />

                    <button type="submit" id="btn-add" class="btn btn-primary btn-lg">Add Employee
                    </button>
                </form>
            </div>

        </div>
        <%@ include file="common/footer.jsp" %>
        <script type="text/javascript" src="js/main.js"></script>

在页脚之后，我添加了 n 个 JS 文件，但是当我单击“添加”按钮时未调用此 JS 文件。我尝试使用警报和控制台进行调试但是，当我按下“添加”按钮时警报没有发生在jsp中。

$(document).ready(function () {

    $("#btn-add").submit(function (event) {
       alert();
        //stop submit the form, we will post it manually.
        event.preventDefault();
         console.log("hitted");
        fire_ajax_submit();

    });

});

function fire_ajax_submit() {

var jsonData={
      "iNumber":$("#iNumber").val(),
       "fullName":$("#fullName").val(),
       "joinedDate":$("#joinedDate").val(),
         "position":$("#position").val(),
       "reportsTo":$("#reportsTo").val(),
        "cubicleNo":$("#cubicleNo").val(),
      "jobType":$("#jobType").val()
};

    console.log(jsonData);
}

当我在 JSP 中也按下“添加”时，我看到我的 url 正在发送如下数据：

http://localhost:8080/add-employee?iNumber=i12312&joinedDate=10%2F12%2F2019&position=SE&reportsTo=ASDD&cubicleNo=23&jobType=ASAS

我正在尝试通过 AJAX 发送 Post 请求，但是当我单击“添加”按钮时无法识别我的 JS 文件。

我的标题是：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<html>

<head>
<title>First Web Application</title>
<link href="webjars/bootstrap/4.3.1/css/bootstrap.min.css"
    rel="stylesheet">

</head>

<body>

我的页脚是：

<script src="webjars/jquery/3.4.0/jquery.min.js"></script>
 <script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <script
        src="webjars/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>

        <script>
                $('#joinedDate').datepicker({
                    format : 'dd/mm/yyyy'
                });
            </script>
</body>

            </html>

我的 pom.xml 是：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ashwin</groupId>
    <artifactId>vemployee</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>vemployee</name>
    <description>Demo project for Spring Boot for offc</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <!-- https://mvnrepository.com/artifact/jstl/jstl -->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <!-- needed for jsp -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <version>9.0.27</version>
        </dependency>

        <!--bootsrap and jquery-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap-datepicker -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap-datepicker</artifactId>
            <version>1.7.1</version>
        </dependency>

        <!--        <dependency>-->
<!--            <groupId>com.oracle.ojdbc</groupId>-->
<!--            <artifactId>ojdbc8</artifactId>-->
<!--            <scope>runtime</scope>-->
<!--        </dependency>-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

我放在resources/static/js文件夹中的 JS 文件。

Answer 1

$("#btn-add").submit(function (event) {在这一行中，您尝试提交的是按钮而不是表单。将.click更改为.submit ，以便获得： $("#btn-add").click(function (event) {