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选择器失效的问题,比如在以下代码中,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title> <script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript" src="my.js"></script>
<script type="text/javascript">
// var len = $("img").length;
// alert(len);
// $(function(){
// var len = $("img").length;
// alert(len);
// })
alert($("img").length);//alert出来的总是0 ,
</script>
</head>
<body> <form action="tosubmit" method="post" class="yongle">
账号:<input type="text" name="mingzi" /><br>
密码:<input type="password" name="mima" /><br>
<input type="submit" value="登陆" />
</form>
<img /> <img />
<a href="dynamicMethod.do" class="yongle">转到dynamicMethod.jsp</a>
<a href="dynamicMethod">也是转到dynamicMethod.jsp</a>
<a href="dynamicMethod.action">哈哈,也是转到dynamicMethod.jsp</a>
</body>
<script type="text/javascript">
alert($("img").length);//alert出来的是预想的 2
</script>
</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代码})。
jsp中的jquery失效以及引入js失败的问题的更多相关文章
- 在JSP中使用jQuery的冲突解决(收集整理)
在JSP中使用<jsp:include page="somethingPage.jsp"></jsp>来嵌套页面的时候,会出现jQuery之间的冲突 解决办 ...
- 使用Jquery promise 动态引入js文件
动态加载一个js得方式很多,如下方式: /** *一般方式加载 */ function normalLoadScript(url) { var node = document.createElemen ...
- 在jsp中使用jstl,不使用JS,实现递归,生成N级菜单
参考材料: http://blog.csdn.net/kimsoft/article/details/7801564 我的实现: 1.我的recursionMenu.jsp代码如下: <%@ ...
- 从servlet向jsp中传数据用Java接收js调用
servlet: response.sendRedirect("showMessage.jsp?ValueA=1"); jsp: var a=<%=request.getPa ...
- jsp引入js文件
转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script& ...
- jsp中java代码、jsp代码、js代码执行的顺序
原理: jsp中的Java代码 -- 服务器端代码 js代码 -- 客户端代码 java是在服务器端运行的代码,jsp在服务器的servlet里运行,而JavaScript和html都是在浏览器端运行 ...
- JSP中include指令和include动作区别
首先 <%@ include file=” ”%>:为指令元素 <jsp:include page=” ” flush=”true”/>:为 动作元素 先说指令元素: incl ...
- jsp文件引入js文件的方式(项目部署于web容器中)
在页面中引入javascript文件的方式是多种多样的,本文介绍两种. 通过<script>标签插入js文件 通过这种方式引入的js,写对js文件和jsp文件的路径很重要.下面给出一个项目 ...
- 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。
今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...
随机推荐
- 编程实现Windows系统自动登录
编程实现Windows系统自动登录 原理: 通过注册表修改实现.Windows内置了自动登录的机制,在登录系统时,winlogon会检查注册表下有没有设置自动登录,如果设置了就上就会读取用户名和密码, ...
- 解决Flex4 发布后访问 初始化极其缓慢的问题
原文http://blog.163.com/vituk93@126/blog/static/170958034201282222046364/ 昨天找了个免费.net空间,想测试一下做的一个简单Fle ...
- ashx页面中context.Session["xxx"]获取不到值的解决办法
在 aspx和aspx.cs中,都是以Session["xxx"]="aaa"和aaa=Session["xxx"].ToString()进 ...
- webservice主流框架Axis、Axis2、XFire、CXF的比较
http://ws.apache.org/axis/ http://axis.apache.org/axis2/java/core/ http://xfire.codehaus.org/ http:/ ...
- objective-C学习笔记(六)继承与多态
封装 encapsulation 隐藏对象内部实现细节,对外仅提供公共接口访问. (说白了就是属性啊,方法啊全都写在类内,对外只提供访问,不需要了解细节) 继承 inheritance 一个类 ...
- error C2018: unknown character '0xa1'
调试程序时出现 error C2018: unknown character '0xa1',代码行中加入的有编译器不能识别的字符,才发现由空格引起的,删除掉就ok了.
- WPF多线程下载文件,有进度条
//打开对话框选择文件 private void OpenDialogBox_Click(object sender, RoutedEventArgs e) { ...
- 简单的mvvm light 应用
public class MainStudentModel:ViewModelBase { //实体 private StudentModel stu = new Stude ...
- java 去除数组重复数据,并输出重复数据值
/** * 去除重复数据 * @author Sunqinbo */ public class RemoveDuplicateData { public static void main(String ...
- mysql xtrabackup 备份恢复实现,mysql命令备份数据库,打包压缩数据库
简介 Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工具.特点: (1)备份过程快速.可靠 ...