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

最新推荐文章于 2022-11-14 10:03:19 发布

altand

最新推荐文章于 2022-11-14 10:03:19 发布

阅读量4.4k

点赞数

分类专栏： WEB DESIGN 文章标签： jquery插件 jquery iframe css function 数据库

本文链接：https://blog.csdn.net/altand/article/details/7792404

版权

WEB DESIGN 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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头部文件就有问题，掩盖了很大部分的根源，以致我们走了不少弯路。