如何使用Spring MVC在JSP页面中包含JS文件

时间:2017-05-26 05:16:52

标签: javascript html spring-mvc

<?xml version="1.0" encoding="UTF-8"?>  
<beans xmlns="http://www.springframework.org/schema/beans"    
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
xmlns:p="http://www.springframework.org/schema/p"    
xmlns:context="http://www.springframework.org/schema/context"    
xsi:schemaLocation="http://www.springframework.org/schema/beans    
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd    
http://www.springframework.org/schema/context    
http://www.springframework.org/schema/context/spring-context-3.0.xsd">    

<context:component-scan base-package="com.springcurd.*"></context:component-
scan>  

<bean 
class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
<property name="prefix" value="/WEB-INF/jsp/"></property>  
<property name="suffix" value=".jsp"></property>   
</bean>  

<bean id="ds" 
class="org.springframework.jdbc.datasource.DriverManagerDataSource">  
<property name="driverClassName" value="oracle.jdbc.driver.OracleDriver">
</property>  
<property name="url" value="jdbc:oracle:thin:@localhost:1521:xe"></property>  

<property name="username" value="system"></property>  
<property name="password" value="tiger"></property>  
</bean>  

<bean id="jt" class="org.springframework.jdbc.core.JdbcTemplate">  
<property name="dataSource" ref="ds"></property>  
</bean>  

<bean id="dao" class="com.springcurd.dao.EmpDao">  
<property name="template" ref="jt"></property>  
</bean>  
<bean id="employeeValidator" 
class="com.springcurd.validator.EmployeeValidator">
</bean>

</beans>  

function validateForm() {
    var x = document.forms["emp"]["name"].value;
    var y = document.forms["emp"]["sal"].value;
    var z = document.forms["emp"]["designation"].value;

    if (x == "") {
        alert("Please enter Name");
        return false;
    }else if(!/^[a-zA-Z]*$/g.test(x)){
        alert("Only characters are allowed");
        return false;

    }else if(y==""){
        alert("Please enter Salary");
        return false;
    }else if (/[^0-9.]/g.test(y) ){
        alert("Only numbers are allowed");
        return false;

    }else if(z==""){
        alert("Please enter your Designation");
        return false;
    }else if (!/^[a-zA-Z]*$/g.test(z)) {
        alert("Only characters are allowed");
        return false;
    }
    }
    function nameValidate(){
    var a = document.forms["emp"]["name"].value;
    if(a == ""){
        alert("Please enter name");
    }else if (!/^[a-zA-Z]*$/g.test(a)){
        alert("Only characters are allowed");
    }else
        alert(a+" "+"Name entered successfully");
     return true;
    }
    function salValidate(){
    var b = document.forms["emp"]["sal"].value;
    if(b == "") {   
        alert("Please enter Salary");
    }else if (/[^0-9.]/g.test(b) ){
        alert("Only numbers are allowed");
    }else
        alert("Salary entered successfully");
    return true;
    }
    function desigValidate(){
     var c = document.forms["emp"]["designation"].value;
     if(c == ""){
         alert("Please enter designation");
     }else if (!/^[a-zA-Z]*$/g.test(c)){ 
            alert("Only characters are allowed");
     }else
         alert("designation entered successfully");
    return true;
    }
    function validate(){
    var d=document.getElementById("dropDown").value;
    alert("you selected"+" "+d);
    }
     <!DOCTYPE html>
     <html>
     <h1>Add New Employee</h1>

    <head>
    <script type="text/javascript" src="empForm.js">

    </script>

    </head>
    <body>
     <form name="emp" action="save.spring" onsubmit="return validateForm()" 
    method="POST" >

    <table >    
         <tr>    
          <td>Name : </td>   
          <td><input type="text"  name="name" onblur="nameValidate()"/></td>  
         </tr>    
         <tr>    
          <td>Salary :</td>    
          <td><input  type="text" name="sal" id="s" onblur="salValidate()"/>
    </td>  
         </tr>   
         <tr>    
          <td>Designation :</td>    
          <td><input  type="text" name="designation" onblur="desigValidate()"/>
    </td>  
         </tr>   
         <tr>    
          <td> </td>    
          <td><br><input type="submit" value="Save" /></td>    
         </tr>    
        </table> 

    </form>
    <select id="dropDown" onchange="validate()">
    <option value="Hyd">Hyd</option>
    <option value="Bnglr">Bnglr</option>
    <option value="Chennai">Chennai</option>
    </select>
    <body>
    </html>

我的JS文件无法使用html.i在/springcurd/WebContent/WEB-INF/js/empForm.js路径和/springcurd/WebContent/WEB-INF/jsp/empform.jsp路径中的HTML页面中使用我的JS文件名。一个人告诉我这是什么问题。

3 个答案:

答案 0 :(得分:0)

我认为你的脚本标签应该是这样的。你必须指向正确的目录来获取js文件

<script type="text/javascript" src="springcurd/js/empForm.js">

答案 1 :(得分:0)

因为您使用的是Spring框架,所以您的文件结构应该像best practice

一样
springcurd
|
├── resources
|   └── empForm.js
|
└── WEB-INF
    └── jsp
        └── empform.jsp

在您的HTML代码中,您应该添加如下脚本:

<spring:url value="/resources/empForm.js" var="empFormJS" />
<script src="${empFormJS}"></script>

在配置bean的XML文件中,您应该在</beans>标记之前的文件末尾添加这两行。

<mvc:resources mapping="/resources/**" location="/resources/" />
<mvc:annotation-driven />

要查看更改,请执行Project -> Clean并重新部署您的应用程序。

<强>更新

XML文件看起来像缺少MVC定义。 请您尝试替换XML文件中的代码,并告诉我它是否适合您?

<?xml version="1.0" encoding="UTF-8"?>  
<beans xmlns="http://www.springframework.org/schema/beans"    
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
    xmlns:p="http://www.springframework.org/schema/p"    
    xmlns:context="http://www.springframework.org/schema/context"  
    xmlns:mvc = "http://www.springframework.org/schema/mvc"  
    xsi:schemaLocation="http://www.springframework.org/schema/beans    
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
        http://www.springframework.org/schema/context    
        http://www.springframework.org/schema/context/spring-context-3.0.xsd">

在文件的最后更改它:

    <mvc:resources mapping = "/resources/**" location="/resources/" />
    <mvc:annotation-driven/>

</beans>

如果仍然没有帮助尝试另外注册this bean

<bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping" />

答案 2 :(得分:0)

路径应该是

    <script type="text/javascript" src="../js/empForm.js">

尝试在应用更改后强制缓存刷新浏览器(Ctrl + F5)。