现在的位置: 首页 > 综合 > 正文

已正确配置Jquery插件,却提示方法找不到的原因分析(Juery.cookie)

2013年04月18日 ⁄ 综合 ⁄ 共 3242字 ⁄ 字号 评论关闭

1----问题描述
          在我们的网站上,出现这样一个奇怪的问题,我们做了一个弹出层注册页面(专题号:qqcf),注册提示成功,但是在页首的登录框中输入,先后出现三个重大问题:
                     
     A,  
页面验证码反复输入不对,而且页面在不断刷新中,偶尔能输入正确验证码,绝大多数不对;
                     
     B,
解决A后,发现第一次验证码提示总是不对;
                     
     C,
解决B后,QQCF专题页面的注册后,其他页面也有类似的问题,时好时坏,立即登录页首登录框,单击登录,无任何反应,手工单击其他页面,发现已经登录。
2----过程
         
对于问题A
,一开始未找到思路,瞎改了一通代码,无用,照样更新无用,后再页面html中发现,有个“http://url/stat?参数”请求的iframe嵌入,这是我们自己开发的一个流量统计系统的统计代码段,而这个地址找不到,报404错误,因为是iframe嵌入模式,导致页面reload,刷新了验证码,而你输入的已经是过期的验证码,所以报错,偶尔正确输入是因为正好在刷新的空隙中输入的。
           对于问题B,可能与Memcache有关系,因为验证码存储在其中,在第一次读取的时候存在问题,解决有乙方修改了JS逻辑,验证码框获得焦点后直接再次刷新获得新的验证码,规避了这个问题。因为我没有参与这个问题的解决,所以不了解详细情况,这里面只是记录一下。
           
对于问题C
,主要重点描述:
                         我们分析了一下,大概几个原因:
                                   
  a,注册并未成功,数据库中无数据;
                                      b,注册没有问题,登录校验有问题;
                                      c,校验没有问题,客户端JS有问题;

                         进一步分析:
                               经过一个晚上的思考实验,总结如下:
                                      a,验证数据库的数据插入,非常正常,没有问题;
                                      b,登录代码经过乙方确认更新,也没有问题;
                                      c,问题很可能处在客户端上面,因为我们页面分为header.html,index.html,foot.html通过包含关系形成整体页面,其他众多页面也有类似的登录无反应情况,尤其是新注册用户,老用户似乎没有出现此类问题。

          他人提示,header.html登录有问题否?经过测试,这个头部无法相应用户登录,问题依旧,而主页能登录的原因一个就是因为在header头部前面,还有<head>标签,标签中有一个jquery.min.js库,是不是因为缺少了一些JS函数呢?因为是min版本,chrome下提示网页jquery找不到,重新调整头部,加入Jquery-1.4.3完整库文件,问题解决了!
还是有问题,主要是其他页面登录现在能响应了,但是QQCF专题注册后,登录还是没有响应,我们一时没有找到问题的解决方法。无奈之下,查看报错,我们看下网页中包含的JS库文件:

	<script type="text/javascript" src="http://###/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="http://###/js/hisap/jquery-1.4.3.js"></script>

            我们看到头部文件已经加入了jquery-1.4.3.js,并且有个一个负责登录的JS脚本index_logon.js,我们看一下里面的主要触发函数:

function logons() {
	var uname = document.getElementById("uname").value;
	var upassword = document.getElementById("upassword").value;
	var llcode = document.getElementById("llcode").value;
	if(uname=="") {
  		alert("请填写用户名");
  		return false;
  	}
  	if(upassword=="") {
  		alert("请填写密码");
  		return false;
  	}
  	if(llcode=="") {
  		alert("请填写验证码");
  		return false;
  	}
  		jQuery.getJSON(lrpath+"/member/loginAction_memberLogin2.do?date="+new Date()+"&jsoncallback2=?", {'member.loginName':uname, 'member.password':upassword,'checkCode':llcode}, function(data){
  			if(data!="" && data.ack=='noc') 
  			{
  			   alert("验证码错误");	
  			}
  			else if(data!="" && data.ack=='yes')
  			{
				    if(jQuery.cookie('loginState') =='true')
				     {
				     	  window.location.reload();					
				     }
				     else 
				     	{
					       alert("用户名密码错误");
				      }
				     /* window.location.reload();	*/
			} 
			else 
			{
				alert("用户名密码错误");
			}
		});
  }

              经过检测,我们发现在if(jQuery.cookie('loginState') =='true')出现 no method cookie的问题,即单击登录按钮,执行至此条语句后,无法继续执行,提示上面的错误,我们通过firefox重新跟踪了流程,发现在寻找cookie方法中是到jquery-1.4库中寻找,而不是cookie插件库;
        一时间,没有思路解决,与乙方闲聊中,说了一句,为什么目前其他页面都是好的?我突然想到,这个专题页面的问题,是不是嵌入了过多的库?
看下了源码,发现一共嵌入了三次jquery库,分别出现在<head>标签,header.html,和专题的page.html中,分别对应:

	<head>	
	<script type="text/javascript" src="http://###/js/jquery-1.4.2.min.js"></script>
	</head>  	
	<script type="text/javascript" src="http://###/js/hisap/jquery-1.4.3.js"></script>
	以及专题页面中:
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

         会不会因为加载次数过多的原因呢?我试着去掉最后这个,发现reload语句执行了!页面终于正常了。

3------总结

            这个问题其实以前也遇到类似的,不过是CSS方面的,在目前的网页中,加载CSS和JS过程中,是以最后一个加载的为准,所以,虽然我们在头部文件header.html中加载了jquery库和jquery.cookie插件,但是由于在page.html中又加载了一次微软的jquery库,导致前面所做的工作完全没有起到作用,cookie方法找不到,结合我们前面跟踪JS执行过程中,发现到jquery-1.4.min.js中寻找cookie方法来看,正是这个原因,并且CSS中也有类似的情况,所以在网页中加载JS以及CSS等时候,需要注意顺序。
同时在处理这个问题中,由于出现了多个BUG,同时本身header.html头部文件就有问题,掩盖了很大部分的根源,以致我们走了不少弯路。

抱歉!评论已关闭.