스프링 부트를 사용하고 있으며 다음과 같은 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>
bottom 글 뒤에 n 개의 JS 파일을 추가하고 있지만 "추가"button을 클릭해도이 JS 파일이 호출되지 않습니다. 경고 및 콘솔을 사용하여 디버깅을 시도했지만 "추가"button을 눌러도 경고가 발생하지 않습니다. 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 요청을 보내려고하는데 추가 button을 클릭해도 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>
내 bottom 글 :
<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>