javascript - Spring Boot 无法识别 Javascript 文件
问题描述
我正在使用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>
解决方案
$("#btn-add").submit(function (event) {
使用此行,您尝试提交按钮而不是表单。将 更改.submit
为.click
,以便您获得:$("#btn-add").click(function (event) {
推荐阅读
- python - Python将Qt ui与信号分开
- redhat-datavirt - 是否有连接 teiid 中所有列的功能?
- android - 如何设置 DatePickerDialog 的标题?
- node.js - 无法在节点 js 中使用 async/await 从 dynamo db 操作中获取值
- python - 用户在不使用 QLayout 的情况下扩展/调整 QTextBrowser 小部件的大小
- java - 如何在 Spring Rest 中同时使用 @Pathvariable 和 @RequestParam
- php - 生成 PDF 时 Laravel/Angular-POST 500(内部服务器错误)
- javascript - 对 HTML DOM 元素求和时未定义的 HTML 对象(对象 HTMLUnknownElement)
- python - 将 azure luis 输出提取到熊猫数据框
- jwt - Auth0:即使 JWT 访问令牌未过期,/userinfo 也会返回未经授权的