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

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

<li><a id="login" name = "login" href="http://xxxx" >登录</a></li>

上面这个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了。个人认为这样写跳转比较方便维护，代码也很少，没有多余。