jsp中的jquery失效以及引入js失败的问题

  这段时间在试着看公司用的框架是怎么写的,看到项目中对jquery进一步封装的这一部分,所以自己试着写一些demo来模仿框架中的用法。

  再一次的,又遇到了一个问题,jsp中引入js的问题,好久没有自己从头一步一步地在jsp中引入js了,怎么弄都没法达到预想的结果。现在把遇到的问题以及解决办法写在这里,以便以后遇到后查看。

  1.在jsp中,引入js但是浏览器总是报404找不到对应的js的处理办法,

先说结论:js最好还是放在WebContent下,然后clean,如果浏览器报404找不到js,那么就在tomcat服务器对应的项目下看是否有对应的js。

解决办法:jsp中引入js还是写绝对路径比较省事,开始的时候我把js这个文件夹放在项目下,即Wyl下,但是运行项目的时候浏览器总是提示找不到引入的my.js和jquery.js,然后我就在tomcat下看,具体路径E:\apache-tomcat-7.0.65\webapps\Wyl,果然这个路径下没有生成js这个文件夹,所以肯定找不到引入的my.js等了,试了好几次,只有把js文件夹放在WebContent下,然后clean项目后,在
上面的路径下就可以看到引入的js文件夹以及jquery.js等了

  2.在jsp或者html中,关于jquery选择器失效的问题,比如在以下代码中,

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5
 6 <script type="text/javascript" src="jquery-2.2.0.js"></script>
 7 <script type="text/javascript" src="my.js"></script>
 8 <script type="text/javascript">
 9     // var len = $("img").length;
10     // alert(len);
11     // $(function(){
12     //     var len = $("img").length;
13     //     alert(len);
14     // })
15     alert($("img").length);//alert出来的总是0 ,
16 </script>
17 </head>
18 <body>
19
20     <form action="tosubmit" method="post" class="yongle">
21         账号:<input type="text" name="mingzi" /><br>
22         密码:<input type="password" name="mima" /><br>
23         <input type="submit" value="登陆" />
24     </form>
25     <img /> <img />
26     <a href="dynamicMethod.do" class="yongle">转到dynamicMethod.jsp</a>
27     <a href="dynamicMethod">也是转到dynamicMethod.jsp</a>
28     <a href="dynamicMethod.action">哈哈,也是转到dynamicMethod.jsp</a>
29 </body>
30 <script type="text/javascript">
31     alert($("img").length);//alert出来的是预想的 2
32 </script>
33 </html>

15行,和31行的两个alert,这个应该跟浏览器加载网页的先后步骤有关,我自己理解为:在<head>标签里的<script>代码执行的时候<body>中的代码还没加载出来,所以

jquery选择器肯定选择不到任何元素,因此这个jquery对象的长度就是0,jquery对象实际上是一个数组。

因此如果想一次性避免麻烦,则有两个解决办法,

方法1 :把<script>标签后移,放在<body>标签后,这样当执行到<script>的时候<body>里的代码已经加载完成,jquery提供的选择器等功能也就能够正常工作了。

实际上,我们现在的这个项目是放在jsp最后的,即body后面的,这种方式比较省事一点。

方法2 :如果实在要把js代码写在head标签里,可以把js代码写在$(function(){//js代码})。

时间: 2024-08-17 14:37:57

jsp中的jquery失效以及引入js失败的问题的相关文章

JSP中设置超链接失效点击进入下载页面的问题

在JSP中设置超链接标签体后点击发现进入不了页面而是进入了下载页面,此时需要在你新建的超链接对应的Servlet中查看response响应头是否有设置,设置是否成功,如下代码: 在JSP页面设置如下超链接发现进入不了, <a href="<%= request.getContextPath()%>/servlet/BuyServlet?prod=电视">电视</a><br> 此时进入BuyServlet类中查看response的应答头的设

在jsp中使用jstl,不使用JS,实现递归,生成N级菜单

参考材料:  http://blog.csdn.net/kimsoft/article/details/7801564 我的实现: 1.我的recursionMenu.jsp代码如下: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ page import="com.lesl

jsp引入js文件

转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script> </script>之间,看是否能够正常运行,如果不能,请核查代码 2) 如果引入的代码在当前页面中能够正常运行,但当引入时不能正常运行,则有两种可能    A:引入Js的路径有问题    B:引入的Js的编码格式与当前页面不匹配: 3)引入Js的路径问题    js的引入不外乎两种,相对路

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

JSP中include指令和include动作区别

首先 <%@ include file=" "%>:为指令元素 <jsp:include page=" " flush="true"/>:为 动作元素 先说指令元素: include指令元素读入指定页面的内容.并把这些内容和原来的页面融合到一起. 然后经过两个阶段: 1.将jsp翻译成 servlet  2.servlet 翻译成 .class文件 这样的话,在被引入文件中请不要加入 contentype 的属性 ,因为j

使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这里不得不吐槽一下国内资料的可信度,不说了,以后遇到问题尽量还是google吧,花点钱买个vpn值了,生命有限,节约时间. 下面记录下解决方法吧: 首先,确保jsp引入了jstl:<%@ taglib uri="http://java.sun.com/jsp/jstl/core" pr

JSP中引入js文件

1. 引入的js文件代码执行出错        排查方法:将引入的js文件中的代码直接放到jsp中<script></script>标签内,使用浏览器访问,如果出错,则为js 代码存在问题 2. 如果步骤一中未出错,但引入时报错,则有两种可能 引入Js的指令有错误 引入的Js的编码格式与当前页面不匹配 1) 引入Js的指令有错误     |-source     |    |     |    ---js     |      |     |      ---base.js    

【JSP中引入文件】JSP中获取根路径+引用js文件

在jsp界面中经常需要引入js.css等文件,通常都需要先获取项目根路径,然后再引入文件. 例如: 项目路径如下,需要在index.jsp中引入FusionCharts相关的js.css等: index.jsp <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.get

jsp文件引入js文件的方式(项目部署于web容器中)

在页面中引入javascript文件的方式是多种多样的,本文介绍一种. 1.在eclipse中新建一个web项目(project3),目录结构如下: 二:在jsp页面的最开始,获取项目的根路径. <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort