jQuery发送ajax请求，一次点击重复提交

问题描述：
前台页面

<input type="button" class="inputbutton" id="btnlogin" value="登录" />

show.js:

$("#btnlogin").click(function(){
    $.ajax( {	
    url : "LoginAction",	
    type:"post",
    dataType:"json",								
    data:"username="+userName,
    timeout:20000,
    success:function(){}
  });
}）;

点击登录按钮时，会重复提交数据。百思不得其解！
原因分析：
看了网友们的分析，有的说是“两次提交的原因是在执行完ajax请求后，并没有阻止submit的行为，解决方式是不使用type为submit类型的按钮，而是使用type是button的按钮”可是我用的就是type=button的按钮啊，故此原因排除。还有网友说这是jQuery的Bug，经测试在我写的程序里的其他页面也用到类似方法，并没有发生这种现象，故此原因也排除。
后来经过一番摸索，终于找到了原因所在：
我是在本页面（login.jsp）include 了（top.jsp）,这两个页面中都引入了show.js:

<script type="text/javascript" src="js/show.js"></script>

这也就导致了引入两次show.js文件，所以会发生提交两次的现象。我把top.jsp文件中的

<script type="text/javascript" src="js/show.js"></script>

删除后，再没发生此种现象。至此，完美解决！

这次失误提醒我：以后写代码一定要细心。

 

 

评论

2 楼 红袖添香夜半读 2012-09-25  

laogao3232 写道

如果你的提交function不是匿名函数，也不会有这个问题吧。

引入了两次，一样会重复提交吧。

1 楼 laogao3232 2012-09-24  

如果你的提交function不是匿名函数，也不会有这个问题吧。