放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。
js文件放在<body></body>之间
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!-- add by hongk end -->
<html>
<head>
<title>更改密码</title>
<LINK href="${ctx }/static/css/default/common.css" type="text/css" rel="stylesheet">
<script src="${ctx }/static/js/common/common-ie.js" type="text/javascript"></script>
<script src="${ctx }/static/js/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<table class="deftoptable" border="0" width="90%" id="PAGETABLE" cellspacing="0" cellpadding="0" >
<tr>
<td class="leftsidetd" width="15"> </td>
<td class="headercol" width="750"> <img border="0" src="${ctx }/static/images/head-sot2.gif" width="43" height="42" >更改密码</td>
<td class="rightsidetd" width="15"> </td>
</tr>
<tr >
<td class="leftsidetd" width="15"> </td>
<td width="95%" class="bodycol" align=center >
<br>
<table class="sestab" id="appChangePassword" cellspacing="0" cellpadding="0" style="width: 80%">
<thead>
<tr>
<th class="sheadleft"> </th>
<th class="sheadmain">更改密码</th>
<th class="sheadright"> </th>
</tr>
</thead>
<tbody class="sbodymain">
<tr>
<td colspan="3" class="sbodytd"><br />
<table width="700" border=0 class="guitable">
<tr>
<td align="center">
<form action="" id="updatePassForm" class="updatePass_form">
<p>输入旧密码：<input type="password" name="oldPass"></p>
<p>输入新密码：<input type="password" name="newPass"></p>
<p>确认新密码：<input type="password" name="affirmPass"></p>
<input type="hidden" name="submitType" value="update">
<input type="button" id="updatePass" value="提交">
<input type="reset" name="resetPass" value="重置">
<input type="button" id="returns" value="返回">
</form>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</td>
<td class="rightsidetd"> </td>
</tr>
</table>
<script type="text/javascript" src="${ctx }/static/js/usrAndPower/resetAndUpdPass.js"></script>
</body>
</html>js文件放在<head></head>之间
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!-- add by hongk end -->
<html>
<head>
<title>更改密码</title>
<LINK href="${ctx }/static/css/default/common.css" type="text/css" rel="stylesheet">
<script src="${ctx }/static/js/common/common-ie.js" type="text/javascript"></script>
<script src="${ctx }/static/js/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx }/static/js/usrAndPower/resetAndUpdPass.js"></script>
</head>
<body>
<table class="deftoptable" border="0" width="90%" id="PAGETABLE" cellspacing="0" cellpadding="0" >
<tr>
<td class="leftsidetd" width="15"> </td>
<td class="headercol" width="750"> <img border="0" src="${ctx }/static/images/head-sot2.gif" width="43" height="42" >更改密码</td>
<td class="rightsidetd" width="15"> </td>
</tr>
<tr >
<td class="leftsidetd" width="15"> </td>
<td width="95%" class="bodycol" align=center >
<br>
<table class="sestab" id="appChangePassword" cellspacing="0" cellpadding="0" style="width: 80%">
<thead>
<tr>
<th class="sheadleft"> </th>
<th class="sheadmain">更改密码</th>
<th class="sheadright"> </th>
</tr>
</thead>
<tbody class="sbodymain">
<tr>
<td colspan="3" class="sbodytd"><br />
<table width="700" border=0 class="guitable">
<tr>
<td align="center">
<form action="" id="updatePassForm" class="updatePass_form">
<p>输入旧密码：<input type="password" name="oldPass"></p>
<p>输入新密码：<input type="password" name="newPass"></p>
<p>确认新密码：<input type="password" name="affirmPass"></p>
<input type="hidden" name="submitType" value="update">
<input type="button" id="updatePass" value="提交">
<input type="reset" name="resetPass" value="重置">
<input type="button" id="returns" value="返回">
</form>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</td>
<td class="rightsidetd"> </td>
</tr>
</table>
</body>
</html>
<!-- add by hongk end -->
//重置密码
$("#resetPass").click(function(){
var userName=$("#resetPassForm input[name='userName']").val();
var newPass=$("#resetPassForm input[name='newPass']").val();
var affirmPass=$("#resetPassForm input[name='affirmPass']").val();
if($.trim(userName)==""||$.trim(newPass)==""||$.trim(affirmPass)==""){
alert("请选填完整信息！");
return false;
}
$.ajax({
type:"post",
cache:false,
dataType:"json",
async:false,
url:"usrDefine/resetPassOrUpdatePass.do",
data:$("#resetPassForm").serialize(),
success:function(json){
if(json.success){
alert(json.data);
}else{
alert(json.error);
}
}
});
});
//修改密码
$("#updatePass").click(function(){
var oldPass=$("#updatePassForm input[name='oldPass']").val();
var newPass=$("#updatePassForm input[name='newPass']").val();
var affirmPass=$("#updatePassForm input[name='affirmPass']").val();
if($.trim(oldPass)==""||$.trim(newPass)==""||$.trim(affirmPass)==""){
alert("请选填完整信息！");
return false;
}
$.ajax({
type:"post",
cache:false,
async:false,
dataType:"json",
url:"usrDefine/resetPassOrUpdatePass.do",
data:$("#updatePassForm").serialize(),
success:function(json){
if(json.success){
alert(json.data);
}else{
alert(json.error);
}
}
});
});
//重置页面和修改页面的返回
$("#returns").click(function(){
window.history.back(-1); //update by hongk
});
答案是不仅要放到body里面，而且还得放到定义 id='returns' 的列表框后面，因为这个js脚本中有 $("#returns").click(function()，如果放到head里或者body的 id='returns' 前，页面加载后顺序执行代码，执行到这个js发现 returns 未定义（即undefind），这个js也就失去了作用。
而为什么我们经常看到有很多的人把js脚本放到head里面没事呢？对！
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
这就告诉我们，如果我们想定义一个全局对象，而这个对象与页面中的某个按钮（等等）有关时， 我们必须将其放入body中，道理很明显：如果放入head，那当页面加载head部分的时候，那个按钮（等等）都还没有被定义（也可以说是还没有被加 载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。
2033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
