在单独的js文件中开发Jquery的问题

最新推荐文章于 2022-10-18 18:26:59 发布

原创最新推荐文章于 2022-10-18 18:26:59 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在独立的.js文件中使用JQuery绑定Click事件遇到的问题及解决方案。首先解决了获取项目根目录地址的问题，通过在JSP中设置变量并传递给JS。然后讨论了如何避免在HTML中大量使用onclick属性，而是将跳转逻辑集中在JS文件中。文章详细讲述了尝试使用Ajax GET请求导致的SpringMVC视图解析问题，最后找到了正确的JQuery方法实现点击事件的绑定和页面跳转。

昨天整了很久的一个问题：尝试在单独的.js文件中绑定一个Click事件。一个看似极其简单的问题，对于我这个不熟练的人来说，收获颇多。

上面这个a，要跳转到登录页面。如果直接写href就像上面这样，那么可以直接实现。

现在是要把他用Jquery写在单独的js文件中中，费了一番周折。第一个问题就是，js文件中如何取到项目根目录地址？也就是http://localhost:8080/xxx。借鉴了公司的项目，发现可以这么来。若在加载这个js文件的jsp文件中引用了这样的定义：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

那么可以将这个ctx赋值给js变量： var ctx = $("#ctx").context.URL; 此时ctx即为 http://localhost:8181/projectname.在文件中就可以使用了。

搞定了这个以后，下一个问题又来了。如何跳转？我的第一个尝试是：

jsp文件： <li><a id="login" name = "login" onclick="tologin()" >登录</a></li>

这样写以后自己觉得不好：如果当前页面有很多个链接需要跳转（比如主页的About， Login， News and so on），那么维护起来还要在茫茫的html代码中找来改，麻烦。所以决定全写在js文件中。所以Jsp中就不用写什么方法了，保持这样就可以： <li><a id="login" name = "login" href = "" >登录</a></li>

那么在js文件中怎么去写？我最先的尝试是：

$(function() {

("#loginbtn").click(function(){

$.get(ctx + 'admin‘);

}

});

用阿贾克斯的get去访问。由于框架是SpringMVC，这个就有问题了。后端返回一个ModelAndView，会被ajax需要定义的success或者error回调，这样视图解析策略就被干掉了（自己的理解）。所以无法正常跳转。接下来又改：

(function() {

$("#loginbtn").attr("href", ctx + "admin");

});

还是不能实现，找了半天没找到问题。结果是改来改去漏掉了前面的$.这样就不是jquery的方法块的，而变成了原始的js，这样在加载时这个方法只是定义了，却没被调用（除非写成自调用函数）。加上后，就Ok了。个人认为这样写跳转比较方便维护，代码也很少，没有多余。