잡동사니

반응형

질문

스프링 부트를 사용하고 있으며 다음과 같은 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>

내가 resources / static / js 폴더에 넣은 JS 파일. 여기에 이미지 설명 입력


답변1

$ ( "# btn-add"). submit (function (event) { 양식이 아닌 button을 제출하려는이 행을 사용하십시오. .submit 을 변경하십시오. .click 으로 변경하면 다음과 같은 결과를 얻을 수 있습니다. $ ( "# btn-add"). click (function (event) {



 

 

 

 

출처 : https://stackoverflow.com/questions/59123950/spring-boot-not-recognizing-the-javascript-files

반응형

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band