我正在使用 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>
我将 JS 文件放入 resources/static/js 文件夹中。
最佳答案
$("#btn-add").submit(function (event) { 在这行中，您尝试提交按钮而不是表单。更改 .submit 到 .click，这样你就得到: $("#btn-add").click(function (event) {
关于javascript - Spring Boot 无法识别 Javascript 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59123950/